jquery经典实例之左侧菜单

￡神魔★判官ぃ 2021-07-24 16:11 510阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="GBK">
  5.     <title>Title</title>
  6.     <style>
  7.        .menu_2 {
  8.             margin-left:1px;
  9.             display:none;
  10.         }
  11.         li {
  12.             list-style:none;
  13.         }
  14.         .menu_2 li,.menu_1 {
  15.             display:block;
  16.             text-align:center;
  17.             font-size:10px;
  18.             background-color:#09f;
  19.             color:#ffffff;
  20.             line-height:25px;
  21.             height:25px;
  22.             width:160px;
  23.             margin:3px;
  24.         }
  25.         a:link,a:visited,a:hover,a:active {
  26.             text-decoration:none;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.        <div class="outer">
  32.       <ul>
  33.         <li>
  34.             <a href="#" class="menu_1">一级菜单1</a>
  35.             <ul class="menu_2">
  36.                 <li>二级菜单1-1</li>
  37.                 <li>二级菜单1-2</li>
  38.                 <li>二级菜单1-3</li>
  39.             </ul>
  40.         </li>
  42.         <li>
  43.             <a href="#" class="menu_1">一级菜单2</a>
  44.             <ul class="menu_2">
  45.                 <li>二级菜单2—1</li>
  46.                 <li>二级菜单2—2</li>
  47.                 <li>二级菜单2—3</li>
  48.             </ul>
  49.         </li>
  51.         <li>
  52.             <a href="#" class="menu_1">一级菜单3</a>
  53.             <ul class="menu_2">
  54.                 <li>二级菜单3-1</li>
  55.                 <li>二级菜单3-2</li>
  56.                 <li>二级菜单3-3</li>
  57.             </ul>
  58.         </li>
  59.       </ul>
  60.    </div>
  61.     <script src="jquery-1.5.1.js"></script>
  62.     <script>
  63.         $(document).ready(function(){
  64.                 $(".menu_1").click(function(){
  65.                      $(this).next().show(600);
  66.                      $(this).parent().siblings().children('ul').hide(600);
  67.                     })
  68.             });
  69.     </script>
  70. </body>
  71. </html>

效果图：

20201207135537584.png

发表评论

表情：
评论列表 （有 0 条评论，510人围观）

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

相关阅读

    相关 jQuery实现左侧分类菜单

    打开京东、淘宝等各大类网站，最常见的就是左侧分类菜单栏了，既然这么常见的功能，那么应该怎么去实现它呢，接下来，我会在js中介绍两种实现方式，一种是引入jQuery的实现方式，一

    我会带着你远行我会带着你远行/ 0 赞/ 331 阅读