左侧菜单栏右侧内容（改进，有js效果）

（如有错敬请指点，以下是我工作中遇到并且解决的问题）上一篇文章是简洁版

这是上一篇文章的改进。
上一篇文章的左侧菜单是没有子目录的。

这是效果图：

左侧菜单代码：

<div class="left">
	<ul class="left_main">
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
		<li class="ma-li">
			<p>生活常用</p>
			<ul>
				<li class="one-px-line"></li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
				<li class="pa-li">水果</li>
			</ul>
		</li>
	</ul>
</div>

引用

这是图中所示的下边框线，也可以直接给p标签加border-bottom。

样式部分只添加了以下内容：
.left li添加x方向超出内容隐藏，以及修改了.ma-li和.pa-li的样式。

.left li{
	overflow-x: hidden;
}

.ma-li,.pa-li{
	font-size: 16px;
	line-height: 45px;
	cursor: pointer;
}

.right .ma-li,.pa-li{
	padding-left: 20px;
}
.ma-li p{
	padding-left: 20px;
}
.ma-li.active p{
	border-left: 5px solid #1657c9;
	padding-left: 15px;
}
.pa-li{
	position: relative;
	left: 10px;
}
.pa-li.active{
	color: #1657c9
}

重点就是js部分了。我用的是JQuery写的。如有更好建议，可以提出来。

点击一级目录时二级目录的第一个元素默认active，即在点击一级目录时可以立刻请求接口获取第一个子元素的数据，当点击第二个元素时再获取第二个子元素的数据。

且点击一级目录时，二级目录会有一个向左移动的效果。

当然，打开页面时已经可以通过接口获得第一个一级目录里的第一个二级目录数据了。

再结合加载图使用，就更好了。

var _leftMali   = $('.left_main>.ma-li');
var _leftMaliUl = $('.left_main>.ma-li>ul');
var _leftPali   = $('.left_main .pa-li');

var _maLiFirst  = $('.left_main .ma-li:first-child');
_maLiFirst.addClass('active')
_maLiFirst.find('.pa-li').first().addClass('active')

_leftMali.each(function(){
	if($(this).hasClass('active')){
		$(this).find('ul').css('display','block')
	}else{
		$(this).find('ul').css('display','none')
	}

	/*_leftMali.find('.pa-li').animate({left:0},500)
	_leftMali.find('.pa-li').css('left','10px')*/

	_leftMali.unbind('click').click(function(){
		_leftMali.find('.pa-li').removeClass('active');
		$(this).find('.pa-li').first().addClass('active')
				
		$(this).addClass('active').find('ul').css('display','block');
		$(this).siblings().find('ul').css('display','none');
		$(this).siblings().removeClass('active');
	
		if(!$(this).hasClass('active')){
			$(this).find('.pa-li').animate({left:0},500)
			$(this).parent().find('.pa-li').css('left','10px')
		}
	})
	_leftPali.unbind('click').click(function(event){
		_leftPali.removeClass('active');
		$(this).addClass('active');
		event.stopPropagation();
	})
})

左侧菜单栏右侧内容（改进，有js效果）

猜你喜欢