使用jQuery怎么隐藏与显示侧边栏 - 行业资讯 - 肥雀云

　　介绍

这期内容当中小编将会给大家带来有关使用jQuery怎么隐藏与显示侧边栏,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

jQuery是什么

jQuery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件,是继原型之后又一个优秀的JavaScript代码库,能够用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。

<强>实现思路:

1。布局:

布局顶部的topDiv,左侧的leftDiv (optionDiv navListUl)

布局右侧的contentDiv。

布局如图:

使用jQuery怎么隐藏与显示侧边栏”> 2. js控制optionDiv和navListUl ①。当点击optionDiv的时候添加本次是否点击在类的标记, ②。移除其他optionDiv的活跃类标记, ③。当前的optionDiv拥有活跃类时移除积极类,没有激活类时,添加活跃类。 ④。隐藏所有的navListUl ⑤。显示类为激活的optionDiv下面的navListUl ⑥。移除optionDiv的时候添加本次是否点击在类的标记, <强>实现代码:</强> html: <pre类= & lt; div 类=發eft_option"比; 　　& lt;才能div 类=皁ption_title active"比; 　　,,,本周食谱　　& lt;才能/div> 　　& lt;才能ul 类=皌his_week nav-list"比; 　　,,,& lt; li , date-id=?“,类=皐eekDate"在周一食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate", date-id=?“祝辞周二食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate", date-id=?“在周三食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate", date-id=?“祝辞周四食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate", date-id=?”;在周五食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate", date-id=?“在周六食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate", date-id=?”;在周日食谱& lt;/li> 　　& lt;才能/ul> 　　& lt;才能div 类=皁ption_title"比; 　　,,,下周食谱　　& lt;才能/div> 　　& lt;才能ul 类=皀ext_week nav-list",在　　,,,& lt; li date-id=?“,类=皐eekDate2"在周一食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate2", date-id=?“祝辞周二食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate2", date-id=?“在周三食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate2", date-id=?“祝辞周四食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate2", date-id=?”;在周五食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate2", date-id=?“在周六食谱& lt;/li> 　　,,,& lt; li 类=皐eekDate2", date-id=?”;在周日食谱& lt;/li> 　　& lt;才能/ul> 　　& lt;/div>

js:

//控制侧边栏的显示与隐藏　　$ (“.option_title") .click(函数(){ 　　(一)美元才能.addClass (“in");//对才能不是类类为的元素移除积极类　　美元才能(“.option_title")自身之外(“.in") .removeClass (“active");//多才能次点击设置改元素的类为积极或不是活跃　　(一)美元才能.toggleClass (“active");//才能以滑动方式隐藏所有列表　　美元才能(“.nav-list") .slideUp ();//才能以滑动方式显示元素　　,,(“.active") . next()美元.slideDown ();//移才能除选中optionDiv的类　　(一)美元才能.removeClass (“in"); 　　});

上述就是小编为大家分享的使用jQuery怎么隐藏与显示侧边栏了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。