jquery折叠菜单练习

最新推荐文章于 2023-04-15 14:00:30 发布

这是我的自己

最新推荐文章于 2023-04-15 14:00:30 发布

阅读量633

点赞数

分类专栏： jquery练习文章标签： jquery css

本文链接：https://blog.youkuaiyun.com/weixin_41355989/article/details/105918472

版权

jquery练习专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

两种方式：
方式一：再点击下一个一级菜单后前一次点的一级菜单会收回去
方式二：需要手动再次点击才会还原或者展开
重点：
下拉动画slideDown /收起动画slideUp
执行下一次操作前都要先通过.stop() 停止动画

jquery代码：

  // 方式一：再点击下一个一级菜单后前一次点的一级菜单会收回去
  $(function(){
    var $li=$(".menu>li") 
    $li.click(function () { 
      $(this).children(".show").stop().slideDown(1000);
    $(this).siblings().children(".show").slideUp(1000);
    }); 
    
  });
   //方式二：需要手动再次点击才会还原
   // $(document).ready(function()   
   // {    
   //  $(".menu li").children("ul").hide();    /* 和CSS样式display:none一样效果 */
   //  $(".menu li").click(function()    {     
   //   $(this).children("ul").toggle();    
   //   });   
   //  });

HTML和CSS:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  .menu{
   width: 300px;
   
   
  }
  .menu>li{
   border: 1px solid gray;
   /* height: 50px;不可设定高度,主li就没办法展开 */
   line-height: 50px;
   text-align: center;
   border-bottom: none;
   list-style: none;
   background-color: #DAA520;
  }
  .menu>li:last-child{
   border-bottom: 1px solid gray;
   border-bottom-right-radius:15px ;
   border-bottom-left-radius:10px ;
  }
  .menu>li:first-child{
   border-top-right-radius:10px ;
   border-top-left-radius:10px ;
  }
  .show>li:hover{
   background-color: red;
  }
  .show>li{
   list-style: none;
   border-bottom: 1px solid white;
   height: 50px;
  }
  .show{
   display: none;
   background-color: blueviolet;
  }
 </style>
 <body>
  
   <ul class="menu">
    <li>123 <span></span>
     <ul class="show">
      <li>123 <span></span></li>
      <li>123<span></span></li>
      <li>123<span></span></li>
     </ul>
    </li>
    <li>123 <span></span>
     <ul class="show">
      <li>123 <span></span></li>
      <li>123<span></span></li>
      <li>123<span></span></li>
     </ul>
    </li>
    <li>123 <span></span>
     <ul class="show">
      <li>123 <span></span></li>
      <li>123<span></span></li>
      <li>123<span></span></li>
     </ul>
    </li>
   </ul>
  
 </body>
 <script src="./js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">

<script>
</html>