我试图在单击父类时切换元素的类,但由于它是一个大多数类相同的菜单,所以我不想切换该类的所有子级,仅切换该类的子级当前单击的父级。
我的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');
});
});
但是我什至没有在控制台中看到测试,那么正确的方法是什么?
最佳答案
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>
关于javascript - 如何将类切换为仅当前单击类的子类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50682480/