javascript - 下拉事件状态是 jquery/javascript 中父 div 的问题

Question

这是我的代码

$(function(){

    $("li div.main-section").addClass("active");
    $('li > div > a').on('click',function(event){
        $('li > div').removeClass("active");
        $(this).closest('div').addClass("active");
    });

                    
      $('li > div > .dropdown-arrow').on('click',function(event){
          event.preventDefault()
          $(this).closest('li').find('ul').first().toggle(300);
          
      });
});

ul{
list-style:none;
}
.dropdown-main li  .dropdown-main {
    display: none;
}
.dropdown-main .active{
    background-color: rgba(0,201,255,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="dropdown-main" >
  <li class="dropdown" >
    <div class="main-section">
      <button class="dropdown-arrow">+</button>
      <a href="" ><span>Main Menu</span></a>
    </div>
    <ul class="dropdown-main">
      <li class="dropdown">
        <div>
          <button class="dropdown-arrow">+</button>
          <a href="" ><span>Sub Menu</span></a>
        </div>
        <ul class="dropdown-main">
          <li class="dropdown">
            <div >
              <button class="dropdown-arrow">+</button>
              <a href="" ><span>Child Menu</span></a>
            </div>
            <ul class="dropdown-main">
              <li class="dropdown">
                <div >
                  <button class="dropdown-arrow">+</button>
                  <a href="" ><span>Grand Child Menu</span></a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

描述--------------------

案例:1 主菜单颜色(蓝色)默认激活状态。

案例:2 单击“+”按钮时，需要展开和折叠下拉菜单。

案例3:点击字符串(如主菜单，子菜单，子菜单..Garnd子菜单)需要改变事件状态。

案例:4 如果在单击父级(子菜单)“+”按钮时子级(子菜单)字符串处于事件状态，则清除折叠(子菜单)并删除事件类状态并将事件类颜色添加到父级(子菜单)菜单)分区

案例:5 如果点击父级(子菜单)的“+”按钮时子级(子菜单)字符串未激活清除折叠(子菜单)并保持事件类状态和父级(主菜单)div。

欢迎帮助

Answer 1

要显示您不单击 li > div > a 的子菜单但是你点击li > div > button .更改它，您的代码应该可以工作。

另外，您的一些解释(案例)并不是很清楚，所以如果这段代码不能解决您的问题，请在下面的评论中告诉我。

关于您的其余代码( jQ + html )，我有点困惑。

为什么子菜单上有相同的类别(至少为每个类别添加一个特定的类别)？

为什么使用 span在a里面如果你不分开任何东西？为什么不留下 <a>标签？

不要使用空的href而是使用 / href 和 preventDefault() .

而且，为什么要使用 a如果您不想将其用作 a，则首先标记。标签 ？ :) 只使用 span或其他东西。

$(function() {

  $("li div.main-section").addClass("active");
  $('li > div > a').on('click', function(event) {
    event.preventDefault()

    $('li > div').removeClass("active");
    $(this).closest('div').addClass("active");
  });


  $('li > div > .dropdown-arrow').on('click', function(event) {
    const subMenu = $(this).closest('li').find('ul').first()
   
    if ($(subMenu).is(':visible')) {
      $('li > div').removeClass("active")
      let newActive = $(this).closest('.dropdown-main').prev("div")
      $(newActive).addClass('active')
    }
 $(subMenu).toggle(300);
  });
});

ul{
list-style:none;
}
.dropdown-main li  .dropdown-main {
    display: none;
}
.dropdown-main .active{
    background-color: rgba(0,201,255,0.5);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="dropdown-main" >
  <li class="dropdown" >
    <div class="main-section">
      <button class="dropdown-arrow">+</button>
      <a href="" ><span>Main Menu</span></a>
    </div>
    <ul class="dropdown-main">
      <li class="dropdown">
        <div>
          <button class="dropdown-arrow">+</button>
          <a href="" ><span>Sub Menu</span></a>
        </div>
        <ul class="dropdown-main">
          <li class="dropdown">
            <div >
              <button class="dropdown-arrow">+</button>
              <a href="" ><span>Child Menu</span></a>
            </div>
            <ul class="dropdown-main">
              <li class="dropdown">
                <div >
                  <button class="dropdown-arrow">+</button>
                  <a href="" ><span>Grand Child Menu</span></a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>