如何将类切换为仅当前单击类的子类答案

【问题标题】：How to toggle class to child only of current clicked class如何将类切换为仅当前单击类的子类
【发布时间】：2018-06-04 14:05:07
【问题描述】：

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

我的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');
    });
});

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

【问题讨论】：

.menuicon > dropdown-content 无法工作，因为该选择器会选择元素 dropdown-content 作为 .menuicon 的直接子元素。

标签： javascript jquery drop-down-menu

【解决方案1】：

所以我想在 .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>

【讨论】：