左侧菜单栏折叠展开效果-超级简单

分享一个常见于管理后台的左侧菜单栏折叠展开的效果，基于jquery，效果图如下：

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了港南免费建站欢迎大家使用！

一：页面结构：

二：页面样式css，放在head标签里

三：引入jquery文件

四：给一级菜单绑定点击事件，点击时展开下面的子菜单

五：给二级菜单绑定事件，点击时加入选中的深色背景

六：阻止二级菜单点击发生冒泡，当点击二级菜单的时候，一级菜单的事件也会发生，此时二级菜单会被收起，因此需要阻止事件冒泡

原文作者技术博客：

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流

如何刷新jquery easyui accordion (左侧导航菜单）

EasyUi 采用分类控件加Tree做得导航条，现在我更数据，将导航条数据也刷新

$('#accordionPanel').accordion('reload')，可以获取到后台重新加载的数据，但是页面没有更新

如何让jquery左侧菜单弹出的二级不超出显示范围

最简单的方法就是将二级菜单都使用绝对定位， 然后指定好每个二级菜单显示的位置。

但我不建议这么做。可以定义一个容器来专门显示二级菜单。这个容器的高和宽可以根据一级菜单和屏幕宽度来限制。这样，二级菜单都将从顶部对齐。不过很少见有从底部对齐的设计。

jquery左侧导航展开收起，单击时只能显示一个菜单，其他的都隐藏起来。

script type="text/javascript" src="jquery.min.js"/script

script type="text/javascript"

$(function(){

$('#mymenu dt').click(function(event) {

var dd = $(this).next('div');

var display = dd.css('display');

if (display == 'none') {

$("#mymenu div").hide().eq($('#mymenu dt').index(this)).show(); 

}else{

dd.css('display','none');

}

});

})

/script

div id="mymenu"

dl

dt

a href="#"点击我/a

/dt

div style="display:none"

dd class="aaa"a href="#"用户查询/a/dd

dd class="aaa"a href="#"添加用户/a/dd

dd class="aaa"a href="#"用户组/a/dd

/div

dta href="#"点击我/a/dt

div style="display:none"

  dd class="aaa"a href="#"课程列表/a/dd

dd class="aaa"a href="#"添加课程/a/dd

/div

/dl

/div

其实不用那么麻烦的，加个div包含在里面就好控制多了

望采纳 Thx

分享标题：jquery左侧菜单,jquery左侧菜单栏展开收缩
标题路径：http://ybzwz.com/article/dsgjeie.html