javascript - 如何将类切换为仅当前单击类的子类

Question

我试图在单击父类时切换元素的类，但由于它是一个大多数类相同的菜单，所以我不想切换该类的所有子级，仅切换该类的子级当前单击的父级。

我的html结构:

<li>
    <a href="">Toepassingsgebied managementsysteem</a>
    <i class="mdi mdi-plus-box menuicon dropdown"></i>
    <ul class="dropdown-content menuliststyle">
        <li>Algemene bedrijfsgegevens</li>
        <li>Organogram</li>
        <li>Toepassingsgebied managementsysteem</li>
    </ul>
</li>

然后在我的页脚中我得到了以下代码:

$( document ).ready(function() {
    $(".menuicon").on("click", ".dropdown-content" function() {
       $(this).toggleClass("dropdown-show");
       console.log('test');
    });
});

因此，我想在单击 .menuicon 时触发该函数，但仅切换其当前子级的类。

我也尝试过这个:

$( document ).ready(function() {
    $(".menuicon > dropdown-content").on("click", function() {
       $(this).toggleClass("dropdown-show");
       console.log('test');
    });
});

但是我什至没有在控制台中看到测试，那么正确的方法是什么？

Answer 1

So I want to fire the function when .menuicon

在这种情况下，目标为 .menuicon 类。然后查看您的 HTML，然后您想要下一个同级，..在 jquery 中，这是 next..

例如。

$( document ).ready(function() {
    $("body").on("click", ".menuicon", 
    function() {
       $(this).next().toggleClass("dropdown-show");
    });
});

.menuicon {
  color: red;
  cursor: pointer;
}

.dropdown-content {
  display: none;
}

.dropdown-content.dropdown-show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
    <a href="">Toepassingsgebied managementsysteem</a>
    <i class="mdi mdi-plus-box menuicon dropdown">▼</i>
    <ul class="dropdown-content menuliststyle">
        <li>Algemene bedrijfsgegevens</li>
        <li>Organogram</li>
        <li>Toepassingsgebied managementsysteem</li>
    </ul>
</li>

<li>
    <a href="">Toepassingsgebied managementsysteem</a>
    <i class="mdi mdi-plus-box menuicon dropdown">▼</i>
    <ul class="dropdown-content menuliststyle">
        <li>Algemene bedrijfsgegevens</li>
        <li>Organogram</li>
        <li>Toepassingsgebied managementsysteem</li>
    </ul>
</li>