主页 / 问题 / 1308184
Accepted
Max Watson
Asked:2022-07-23 22:30:07 +0000 UTC2022-07-23 22:30:07 +0000 UTC

在 JS 菜单之间切换

  • 772

大家好！

当我点击类时menu-item-has-children，我有必要这样做。sub-menushow-submenu

我的代码，当我单击时menu-item-has-children，会向所有人添加sub-menu一个类，但我需要将其仅添加到我单击的那个 + 以便在我单击另一个时将其删除menu-item-has-children

这里我写了部分代码。

$('.menu-item-has-children').click(function() {
    $('.menu-item-has-children').not(this).removeClass("show-submenu");
    $('.sub-menu').toggleClass("show-submenu");
  });
.menu-item-has-children {cursor: pointer;}
.sub-menu {display: none;}
.show-submenu {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>
<hr>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

请帮助我改进代码，使其仅将类添加到我单击的元素中。

谢谢！

javascript

1 个回答

  1. Best Answer

    利用.children()

    $('.menu-item-has-children').click(function() {
    $('.menu-item-has-children').not(this).removeClass("show-submenu");
    $(this).children('.sub-menu').toggleClass("show-submenu");
  });
    .menu-item-has-children {cursor: pointer;}
.sub-menu {display: none;}
.show-submenu {display: block;}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>
<hr>
<div class="menu-item-has-children">
  Мое меню
  <ul class="sub-menu">
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

    • 1

相关问题