实现侧边导航栏效果，导航栏一共含有三级目录，点击父标题可上下收展其他子标题，记录自己用过的一种写法，主要用jQuery实现。
实现效果图：
具体代码如下:
HTML布局
<div class="content"> <div class="content_left"> <div class="left_title"> LOGO </div><!-- 每一个菜单项 --><div class="menu"> <div class="menu-title">一级菜单</div><ul class="menu-content"><li class="two">二级菜单</li > <ul class="menu-content-third"><li>三级菜单</li> <li>三级菜单</li> <li>三级菜单</li> </ul><li >二级菜单</li><li >二级菜单</li></ul> </div> <div class="menu"> <div class="menu-title">一级菜单</div><ul class="menu-content"> <li >二级菜单</li><li >二级菜单</li><li >二级菜单</li></ul> </div></div> <div class="content_right"> 内容区域 </div></div>
CSS样式
*{ padding: 0; margin: 0; cursor: default; } li{ list-style: none; } .content{ width: 100%; height: 100%; } .content_left{ width: 19%; height: 600px; border: 1px solid #000000; float: left; } .content_right{ width: 80.8%; height: 600px; background-color: antiquewhite; float: right; } .left_title{ height: 50px; width: 100%;text-align: center; line-height: 50px; background-color: aquamarine;} .menu{ width: 100%; text-align: center;}.menu-title{height: 25px; margin-right: 40px;cursor: pointer; }.content-content{ display: block;} .menu-content li:hover{ background-color: azure; cursor: pointer;} .menu-content-third{ margin-left: 40px;display:none;}
jQuery代码
$(function(){//第一步，隐藏子菜单项//找到每一个菜单项，用each循环 $(".menu").each(function(){ $(this).children(".menu-content").hide(); });//给所有的主标题添加点击事件 $(".menu-title").each(function(){ $(this).click(function(){ //弹出当前主标题下的子标题列表var mList=$(this).parents(".menu").children(".menu-content"); //展开、收起导航栏 mList.slideToggle(); }); }); //找到二级标签，给他注册点击事件，收展它下面的三级标题组 $(".two").click(function(){ $(".two").next().slideToggle(); });})
