html设置在隐藏时出现侧边,jQuery实现侧边栏隐藏与显示的方法详解

本文实例讲述了jquery实现侧边栏隐藏与显示的方法。分享给大家供大家参考，具体如下：

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

效果如图：

如何实现点击本周食谱，本周食谱的列表隐藏或显示切换，并关闭下周食谱列表显示，点击下周食谱，让下周食谱的列表隐藏切换显示，并关闭本周食谱列表显示

实现思路：

1.布局：

布局顶部的topdiv，左侧的leftdiv(optiondiv，navlistul)，

布局右侧的contentdiv.

布局如图：

2.js控制optiondiv和navlistul

①.当点击optiondiv的时候添加本次是否点击的in类标记，

②.移除其他optiondiv的active类标记，

③.当前的optiondiv拥有active类时移除active类，没有avtive类时，添加active类。

④.隐藏所有的navlistul

⑤.显示类为avtive的optiondiv下面的navlistul

⑥.移除optiondiv的时候添加本次是否点击的in类标记，

实现代码：

html：

本周食谱

• 周一食谱
• 周二食谱
• 周三食谱
• 周四食谱
• 周五食谱
• 周六食谱
• 周日食谱

下周食谱

• 周一食谱
• 周二食谱
• 周三食谱
• 周四食谱
• 周五食谱
• 周六食谱
• 周日食谱

js：

//控制侧边栏的显示与隐藏

$(".option_title").click(function(){

$(this).addclass("in");

//对不是类class为in的元素移除active类

$(".option_title").not(".in").removeclass("active");

//多次点击设置改元素的类为active或不是active

$(this).toggleclass("active");

//以滑动方式隐藏所有list

$(".nav-list").slideup();

//以滑动方式显示元素

$(".active").next().slidedown();

//移除选中optiondiv的in类

$(this).removeclass("in");

});

ps：感兴趣的朋友可以使用如下在线工具测试上述代码：

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