jQuery实现侧边栏隐藏与显示的方法详解
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
本文实例讲述了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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < div class = "left_option" > < div class = "option_title active" > 本周食谱 </ div > < ul class = "this_week nav-list" > < li style = "color:#ED6168" date-id = "1" class = "weekDate" >周一食谱</ li > < li class = "weekDate" date-id = "2" >周二食谱</ li > < li class = "weekDate" date-id = "3" >周三食谱</ li > < li class = "weekDate" date-id = "4" >周四食谱</ li > < li class = "weekDate" date-id = "5" >周五食谱</ li > < li class = "weekDate" date-id = "6" >周六食谱</ li > < li class = "weekDate" date-id = "7" >周日食谱</ li > </ ul > < div class = "option_title" > 下周食谱 </ div > < ul class = "next_week nav-list" style = "display:none" > < li date-id = "1" class = "weekDate2" >周一食谱</ li > < li class = "weekDate2" date-id = "2" >周二食谱</ li > < li class = "weekDate2" date-id = "3" >周三食谱</ li > < li class = "weekDate2" date-id = "4" >周四食谱</ li > < li class = "weekDate2" date-id = "5" >周五食谱</ li > < li class = "weekDate2" date-id = "6" >周六食谱</ li > < li class = "weekDate2" date-id = "7" >周日食谱</ li > </ ul > </ div > |
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //控制侧边栏的显示与隐藏 $( ".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:感兴趣的朋友可以使用如下在线工具测试上述代码:
在线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程序设计有所帮助。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
基于LayUI分页和LayUI laypage分页的使用示例
本篇文章主要介绍了基于LayUI分页和LayUI laypage分页的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-08-08
最新评论