怎么样才能用层级选择器做出折叠菜单的效果？ - jQuery论坛

已结贴√ 问题点数：20 回复次数：1

怎么样才能用层级选择器做出折叠菜单的效果？

<body>
    <ul class="menu-list">
      <li>
        <p class="menu-head">菜单一</p>
        <div class="menu-body">
          <a href="#">1</a>
          <a href="#">1</a>
          <a href="#">1</a>
          <a href="#">1</a>
          <a href="#">1</a>
        </div>
      </li>
      <li>
        <p class="menu-head">菜单二</p>
        <div class="menu-body">
          <a href="#">2</a>
          <a href="#">2</a>
          <a href="#">2</a>
          <a href="#">2</a>
          <a href="#">2</a>
        </div>
      </li>
      <li>
        <p class="menu-head">菜单三</p>
        <div class="menu-body">
          <a href="#">3</a>
          <a href="#">3</a>
          <a href="#">3</a>
          <a href="#">3</a>
          <a href="#">3</a>
        </div>
      </li>
      <li>
        <p class="menu-head">菜单四</p>
        <div class="menu-body">
          <a href="#">4</a>
          <a href="#">4</a>
          <a href="#">4</a>
          <a href="#">4</a>
          <a href="#">4</a>
          <a href="#">4</a>
        </div>
      </li>
    </ul>
    <script>

    $(function(){

        $(".menu-body").hide();

        $(".menu-head").click(function(){


            })

        })

    </script>

要用到show和hide，并且点开菜单A的时候下面展开，点开菜单B的时候菜单A缩回去

搜索更多相关主题的帖子: 菜单　 class　怎么样　 div　href　

$(function(){ $(".menu-body").hide(); $(".menu-head").click(function(){ console.log($(this).html()); let subItem = $(this).next(); if(subItem.css("display")=="none"){ subItem.show(); }else{ subItem.hide(); } }) })