jquery - (jquery) 一次切换一个下拉元素

Question

我正在构建这个移动端导航栏，其中包含带有更多链接的下拉菜单。

我不知道如何设置它，所以当我点击导航中的链接时，只有那个下拉菜单被激活。现在，当我单击“关于”或“服务”链接时，两个下拉菜单会同时激活。

我尝试了多种使用 jquery 实现此效果的方法，但我无法正常工作。

$('.navbar-item-side').on('click', function() {
  $('.navbar-content-side').toggleClass('dropdown-show');
});

body {
    margin: 0;
    padding: 0;
    background: #20A288;
    overflow: hidden;
    box-sizing: border-box;
    font-family: sans-serif;
}

.side-nav {
    position: relative;
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #222;
    overflow-x: hidden;
    padding-top: 60px;
    transition: .5s ease;
}

.side-nav .btn-close {
    position: absolute;
    top: -18px;
    right: -12px;
    font-size: 50px;
}
    
.side-nav .navbar-content-side {
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s;
}

.side-nav .navbar-list-side {
    position: absolute;
    width: 100%;
    padding: 0;
}

.side-nav .navbar-item-side:hover {
    background-color: #353535;
}

.side-nav li {
    list-style: none;
}

.side-nav a {
    padding: 14px 24px;
    text-decoration: none;
    font-size: 16px;
    color: #ccc;
    display: block;
    transition: all .2s;
    text-align: right;
}

.side-nav a .first-item {
    margin-top: 50px !important;
}

.side-nav a:hover {
    opacity: .6;
}

.dropdown-show {
  max-height: 400px !important;
}

<div id="side-menu" class="side-nav">
    <a href="#" class="btn-close" onclick="closeSideMenu()">&times;</a><br>
    <ul class="navbar-list-side">
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">Home</a>
      </li>
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">About ></a>
        <ul class="navbar-content-side">
          <li><a href="#">Dropdown Item 1</a></li>
          <li><a href="#">Dropdown Item 2</a></li>
        </ul>
      </li>
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">Services ></a>
        <div class="navbar-content-side">
          <ul class="navbar-sub-side">
            <li><a href="#">Dropdown Item 1</a></li>
            <li><a href="#">Dropdown Item 2</a></li>
            <li><a href="#">Dropdown Item 3</a></li>
          </ul>
        </div>
      </li>
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">Contact</a>
      </li>
    </ul>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

代替 $('.navbar-content-side').toggleClass('dropdown-show') 使用 $(this).find('.navbar-content-side ').toggleClass('dropdown-show')

如果你想隐藏其他菜单，只需将代码 ($('.navbar-content-side').removeClass('dropdown-show');) 放在 toggleClass 之前

$('.navbar-item-side').on('click', function() {
  // If you want to hide other menu, then uncomment the code below. That will gitve you a nice effect
  // $('.navbar-content-side').removeClass('dropdown-show');
  $(this).find('.navbar-content-side').toggleClass('dropdown-show');
});

body {
    margin: 0;
    padding: 0;
    background: #20A288;
    overflow: hidden;
    box-sizing: border-box;
    font-family: sans-serif;
}

.side-nav {
    position: relative;
    height: 100%;
    width: 300px;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #222;
    overflow-x: hidden;
    padding-top: 60px;
    transition: .5s ease;
}

.side-nav .btn-close {
    position: absolute;
    top: -18px;
    right: -12px;
    font-size: 50px;
}
    
.side-nav .navbar-content-side {
    overflow: hidden;
    max-height: 0;
    transition: max-height .5s;
}

.side-nav .navbar-list-side {
    position: absolute;
    width: 100%;
    padding: 0;
}

.side-nav .navbar-item-side:hover {
    background-color: #353535;
}

.side-nav li {
    list-style: none;
}

.side-nav a {
    padding: 14px 24px;
    text-decoration: none;
    font-size: 16px;
    color: #ccc;
    display: block;
    transition: all .2s;
    text-align: right;
}

.side-nav a .first-item {
    margin-top: 50px !important;
}

.side-nav a:hover {
    opacity: .6;
}

.dropdown-show {
  max-height: 400px !important;
}

<div id="side-menu" class="side-nav">
    <a href="#" class="btn-close" onclick="closeSideMenu()">&times;</a><br>
    <ul class="navbar-list-side">
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">Home</a>
      </li>
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">About ></a>
        <ul class="navbar-content-side">
          <li><a href="#">Dropdown Item 1</a></li>
          <li><a href="#">Dropdown Item 2</a></li>
        </ul>
      </li>
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">Services ></a>
        <div class="navbar-content-side">
          <ul class="navbar-sub-side">
            <li><a href="#">Dropdown Item 1</a></li>
            <li><a href="#">Dropdown Item 2</a></li>
            <li><a href="#">Dropdown Item 3</a></li>
          </ul>
        </div>
      </li>
      <li class="navbar-item-side">
        <a href="#" class="navbar-link-side">Contact</a>
      </li>
    </ul>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>