下拉活动状态是 jquery/javascript 中父 div 的问题答案

【问题标题】：Dropdown active status is the issue for parent div in jquery/javascript下拉活动状态是 jquery/javascript 中父 div 的问题
【发布时间】：2019-04-17 15:17:47
【问题描述】：

这是我的代码

$(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 如果单击父（子菜单）“+”按钮时子（子菜单）字符串处于活动状态，则清除折叠（子菜单）并删除活动类状态并将活动类颜色添加到父（子菜单）div。

案例：5 如果单击父（子菜单）“+”按钮时子（子菜单）字符串未处于活动状态，则清除折叠（子菜单）并保持活动类状态和父（主菜单）div。

欢迎帮助

【问题讨论】：

您有什么具体问题吗？目前，这是一个需求列表，而不是您遇到问题的逻辑问题。
请看我的代码，我已经完成了一半，但无法更改活动状态
如果您有任何建议，请。

标签： javascript jquery html css

【解决方案1】：

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

另外，你的一些解释（案例）不是很清楚，所以如果这段代码不能解决你的问题，请在下面的 cmets 中告诉我。

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

为什么子菜单的类都一样（至少每个类都加一个特定的类）？

如果你不分离任何东西，为什么在a 中使用span？为什么不留下<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>

【讨论】：

谢谢@Mihai T，这不是我需要的解决方案。但在我的情况下，我只需要在单击字符串时更改背景颜色（如主菜单...大子菜单）。单击“+”按钮时无需更改背景颜色。
所以，当您点击Sub Menu 时，您只想拥有“蓝色背景”但不显示Child Menu？要显示Child Menu，您需要单击按钮吗？还有什么
默认情况下，活动背景需要保留在第一个父 div 中。并在我单击下一个 div 时更改活动背景
如果子 div 处于活动背景状态，当我单击父“+”按钮时，清除子菜单和活动状态并将活动背景添加到单击的父 div。
嗯。希望我理解正确。现在检查编辑的答案

【解决方案2】：

我对你的代码做了一些修改

$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').slideUp(200);
  } else {
    element.addClass('open');
    element.children('ul').slideDown(200);
    element.siblings('li').children('ul').slideUp(200);
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').slideUp(200);
  }
});

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 220px;
  font-family: Raleway, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #00c9ff;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #ddd;
  background: #0d97bb;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #ddd;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<title>Test</title>
</head>

<body>

<div id="cssmenu">
  <ul>
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
     <li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        <ul>
           <li class="has-sub"><a href="#">Sub menu 1</a>
              <ul>
                 <li class="has-sub"><a href="#">Child menu 1</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                       <li><a href="#">Grand menu 3</a></li>
                       <li><a href="#">Grand menu 4</a></li>
                    </ul>
                 </li>
                 <li class="has-sub"><a href="#">Child menu 2</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                       <li><a href="#">Grand menu 3</a></li>
                    </ul>
                 </li>
              </ul>
           </li>
           <li class="has-sub"><a href="#">Sub menu 2</a>
              <ul>
                 <li class="has-sub"><a href="#">Child menu 1</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                    </ul>
                 </li>
                 <li class="has-sub"><a href="#">Child menu 2</a>
                    <ul>
                       <li><a href="#">Grand menu 1</a></li>
                       <li><a href="#">Grand menu 2</a></li>
                       <li><a href="#">Grand menu 3</a></li>
                    </ul>
                 </li>
              </ul>
           </li>
        </ul>
     </li>
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>

</body>

</html>

【讨论】：