本文阐述了用jQuery隐藏和显示边栏的方法。分享给大家参考，如下：

在web项目中，左侧边栏经常出现，右侧网页显示内容。

效果如下：

如何点击本周食谱，隐藏或切换本周食谱列表，关闭下周食谱列表显示，点击下周食谱，使下周食谱列表隐藏和切换显示，关闭本周食谱列表显示

实施思路：

1.布局：

布局顶部的顶部分区，左侧的左侧分区(选项分区，导航列表)，

布局右侧的内容分区。

布局如下：

2.js控件optionDiv和navListUl

(1)点击optionDiv时，添加本次是否点击的in标签，

.移除其他选项的活动类标签，

.当当前的optionDiv有活动类时，移除活动类，当没有活动类时，添加活动类。

.隐藏所有导航列表

.用活动类在选项下显示导航列表

.删除optionDiv时，添加这次是否单击的in标记，

实现代码：

html:

div class=' left _ option ' div class=' option _ title active '本周食谱/div ul class=' this _ week nav-list ' Li style=' color : # Ed 6168 ' date-id=' 1 ' class=' week date '周一食谱/Li Li class=' week date ' date-id=' 2 '周二食谱/Li Li class=' week date ' date-id=' 3 '周三食谱/Li Li Li class=' week date ' date-id=' 4 '周四食谱/Li Li class=' Li li class='weekDate' date-id='7 '星期日食谱/li /ul div class='option_title '下周食谱/Divul class=' next _ week nav-list ' style=' display : none ' lidate-id=' 1 ' class=' week date 2 '星期一食谱/Li liclass=' weekdate2' date-id=' 2 '星期二食谱/Li Li Li class=' week date 2 ' date-id=' 3 '星期三食谱/Li Li class=' week date 2 ' date-id='

//控制边栏$('的显示和隐藏。option _ title’)。单击(function () {$ (this))。add class(' in ')；//删除活动类$()。option _ title’)。不是('。in ')。对于类位于中的元素，remove class(' active ')；//单击几次，将元素的类设置为活动或非活动$(这)。切换类(“活动的”)；//隐藏所有列表$('。导航列表')。滑动模式下的slide up()；//显示元素$('。活动’)。下一个()。在滑动模式下向下滑动()；//移除类$(this)中的。所选选项的remove class(' in ')；});PS:感兴趣的朋友可以使用以下在线工具测试上述代码：

在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun

在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun

关于jQuery的更多信息，请查看本网站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》。

希望本文对大家的jQuery程序设计有所帮助。