手风琴导航栏侧边-jQuery实现-案例

朴灿烈づ我的快乐病毒、 2021-06-22 15:36 745阅读 0赞

效果展示:

在这里插入图片描述

分析:

首先是html界面的构建,我们用li标签和div标签组合成菜单栏。

  1. <ul class="parentWrap">
  2. <li class="menuGroup">
  3. <span class="groupTitle">菜单1</span>
  4. <div>我是弹出来的子菜单1</div>
  5. </li>
  6. <li class="menuGroup">
  7. <span class="groupTitle">菜单2</span>
  8. <div>我是弹出来的子菜单2</div>
  9. </li>
  10. <li class="menuGroup">
  11. <span class="groupTitle">菜单3</span>
  12. <div>我是弹出来的子菜单3</div>
  13. </li>
  14. <li class="menuGroup">
  15. <span class="groupTitle">菜单4</span>
  16. <div>我是弹出来的子菜单4</div>
  17. </li>
  18. </ul>

这样我们思路就很清晰了,当点击某一个li的时候,让它的子div标签显示出来,并且让它兄弟标签的子div隐藏。就完成了这个功能,核心jQuery代码:

  1. // it is easy.
  2. $(function(){
  3. // 需求:点击标题li标签,对应的div显示出来,而它兄弟标签下的div隐藏起来。
  4. $('.parentWrap>.menuGroup').click(function(){
  5. //show()方法返回值就是调用show()方法本身的jQuery对象
  6. $(this).children('div').show().parent().siblings('li').children('div').hide();
  7. });
  8. });

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style-type: none; } .parentWrap { width: 200px; text-align: center; } .menuGroup { border: 1px solid #999; background-color: #e0ecff; } .groupTitle { display: block; height: 20px; line-height: 20px; font-size: 16px; border-bottom: 1px solid #ccc; cursor: pointer; } .menuGroup > div { height: 200px; background-color: #fff; display: none; } </style>
  7. </head>
  8. <body>
  9. <ul class="parentWrap">
  10. <li class="menuGroup">
  11. <span class="groupTitle">菜单1</span>
  12. <div>我是弹出来的子菜单1</div>
  13. </li>
  14. <li class="menuGroup">
  15. <span class="groupTitle">菜单2</span>
  16. <div>我是弹出来的子菜单2</div>
  17. </li>
  18. <li class="menuGroup">
  19. <span class="groupTitle">菜单3</span>
  20. <div>我是弹出来的子菜单3</div>
  21. </li>
  22. <li class="menuGroup">
  23. <span class="groupTitle">菜单4</span>
  24. <div>我是弹出来的子菜单4</div>
  25. </li>
  26. </ul>
  27. </body>
  28. </html>
  29. <script src="jquery-1.12.4.js"></script>
  30. <script> $(function(){ // 需求:点击标题li标签,对应的div显示出来,而它兄弟标签下的div隐藏起来。 $('.parentWrap>.menuGroup').click(function(){ //show()方法返回值就是调用show()方法本身的jQuery对象 $(this).children('div').show().parent().siblings('li').children('div').hide(); }); }); </script>

以上就是全部内容,谢谢你的阅读。

如有纰漏,请不吝指出,不胜感激。

如果你不沉下心来认真练习,所有的阅读都是白费的。

发表评论

表情:
评论列表 (有 0 条评论,745人围观)

还没有评论,来说两句吧...

相关阅读