没有类的兄弟姐妹触发事件 [英] Siblings without class trigger event
本文介绍了没有类的兄弟姐妹触发事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在构建一个可折叠的导航栏。
I am building a collapsable navigation bar .
jQuery("li").click(function(e) {
if (jQuery(this).hasClass('submenu')) {
jQuery(e.currentTarget).children('ul').toggle();
e.stopPropagation();
e.preventDefault();
}
});
ul.level_2,
ul.level_3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="level_1">
<li class="sibling first"><a href="home.html" title="Home" class="sibling first" itemprop="url"><span itemprop="name">Home</span></a></li>
<li class="active submenu"><strong class="active submenu" aria-haspopup="true" itemprop="name">Brillen</strong>
<ul class="level_2" style="display: none;">
<li class="first"><a href="#" title="Herrenbrillen" class="first" itemprop="url"><span itemprop="name">Herrenbrillen</span></a></li>
<li class="last"><a href="#" title="Unterkategorie 1.1" class="last" itemprop="url"><span itemprop="name">Unterkategorie 1.1</span></a></li>
</ul>
</li>
<li class="submenu sibling"><a href="#" title="Sonnenbrillen" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Sonnenbrillen</span></a>
<ul class="level_2" style="display: block;">
<li class="submenu first"><a href="#" title="Varianten & mehr" class="submenu first" aria-haspopup="true" itemprop="url"><span itemprop="name">Varianten & mehr</span></a>
<ul class="level_3">
<li class="first"><a href="#" title="Produkte mit Varianten" class="first" itemprop="url"><span itemprop="name">Produkte mit Varianten</span></a></li>
<li><a href="#" title="Produkte mit Konfigurator" itemprop="url"><span itemprop="name">Produkte mit Konfigurator</span></a></li>
<li><a href="#" title="Produkte mit Staffelpreis" itemprop="url"><span itemprop="name">Produkte mit Staffelpreis</span></a></li>
<li class="last"><a href="#" title="Alle Sonnenbrillen" class="last" itemprop="url"><span itemprop="name">Alle Sonnenbrillen</span></a></li>
</ul>
</li>
<li><a href="#" title="Angebote" itemprop="url"><span itemprop="name">Angebote</span></a></li>
<li><a href="#" title="Neuheiten" itemprop="url"><span itemprop="name">Neuheiten</span></a></li>
<li class="last"><a href="#" title="Unterkategorie 2.1" class="last" itemprop="url"><span itemprop="name">Unterkategorie 2.1</span></a></li>
</ul>
</li>
<li class="submenu sibling"><a href="#" title="Kontaktlinsen" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Kontaktlinsen</span></a>
<ul class="level_2">
<li class="first last"><a href="#" title="Unterkategorie 3.1" class="first last" itemprop="url"><span itemprop="name">Unterkategorie 3.1</span></a></li>
</ul>
</li>
<li class="sibling"><a href="blog.html" title="Blog" class="sibling" itemprop="url"><span itemprop="name">Blog</span></a></li>
<li class="sibling"><a href="%C3%BCber-uns.html" title="Über Uns" class="sibling" itemprop="url"><span itemprop="name">Über Uns</span></a></li>
<li class="sibling last"><a href="kontakt.html" title="Kontakt" class="sibling last" itemprop="url"><span itemprop="name">Kontakt</span></a></li>
</ul>
还有更多可折叠的东西。这些元素具有子菜单类。
如果我单击菜单级别2/3中的项目，则折叠菜单，即使它没有类子菜单。
我希望带有子菜单类的项目充当切换，其余的充当链接。
There are more collapsables. Those elements have the class "submenu". If i click an item in the menu levels 2/3 is collapses the menu, even if it doesnt have the class "submenu". I want the items with the "submenu" class to act as a toggle and the rest to act like links.
推荐答案
单击子项时，您的父单击会触发，您可以使用 e.stopPropagation（）; 来阻止它，但您必须阻止它。
your parent click is triggering when child is clicked, you can prevent it by using the e.stopPropagation(); but you have to prevent it.
喜欢这个
$("li:not(.submenu)").click(function(e) {
e.stopPropagation();
});
jQuery("li").click(function(e) {
jQuery(e.currentTarget).children('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$("li:not(.submenu)").click(function(e) {
window.location = e.target.parentElement.href;
return false
});
ul.level_2,
ul.level_3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="level_1">
<li class="sibling first"><a href="home.html" title="Home" class="sibling first" itemprop="url"><span itemprop="name">Home</span></a></li>
<li class="active submenu"><strong class="active submenu" aria-haspopup="true" itemprop="name">Brillen</strong>
<ul class="level_2" style="display: none;">
<li class="first"><a href="#" title="Herrenbrillen" class="first" itemprop="url"><span itemprop="name">Herrenbrillen</span></a></li>
<li class="last"><a href="#" title="Unterkategorie 1.1" class="last" itemprop="url"><span itemprop="name">Unterkategorie 1.1</span></a></li>
</ul>
</li>
<li class="submenu sibling"><a href="#" title="Sonnenbrillen" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Sonnenbrillen</span></a>
<ul class="level_2" style="display: block;">
<li class="submenu first"><a href="#" title="Varianten & mehr" class="submenu first" aria-haspopup="true" itemprop="url"><span itemprop="name">Varianten & mehr</span></a>
<ul class="level_3">
<li class="first"><a href="#" title="Produkte mit Varianten" class="first" itemprop="url"><span itemprop="name">Produkte mit Varianten</span></a></li>
<li><a href="#" title="Produkte mit Konfigurator" itemprop="url"><span itemprop="name">Produkte mit Konfigurator</span></a></li>
<li><a href="#" title="Produkte mit Staffelpreis" itemprop="url"><span itemprop="name">Produkte mit Staffelpreis</span></a></li>
<li class="last"><a href="#" title="Alle Sonnenbrillen" class="last" itemprop="url"><span itemprop="name">Alle Sonnenbrillen</span></a></li>
</ul>
</li>
<li><a href="#" title="Angebote" itemprop="url"><span itemprop="name">Angebote</span></a></li>
<li><a href="#" title="Neuheiten" itemprop="url"><span itemprop="name">Neuheiten</span></a></li>
<li class="last"><a href="#" title="Unterkategorie 2.1" class="last" itemprop="url"><span itemprop="name">Unterkategorie 2.1</span></a></li>
</ul>
</li>
<li class="submenu sibling"><a href="#" title="Kontaktlinsen" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Kontaktlinsen</span></a>
<ul class="level_2">
<li class="first last"><a href="https://google.com" title="Unterkategorie 3.1" class="first last" itemprop="url"><span itemprop="name">Unterkategorie 3.1</span></a></li>
</ul>
</li>
<li class="sibling"><a href="blog.html" title="Blog" class="sibling" itemprop="url"><span itemprop="name">Blog</span></a></li>
<li class="sibling"><a href="%C3%BCber-uns.html" title="Über Uns" class="sibling" itemprop="url"><span itemprop="name">Über Uns</span></a></li>
<li class="sibling last"><a href="kontakt.html" title="Kontakt" class="sibling last" itemprop="url"><span itemprop="name">Kontakt</span></a></li>
</ul>
或更好的方法
只需检查
or Better approach Just check
if (e.target !== e.currentTarget) {
jQuery("li").click(function(e) {
if (e.target !== e.currentTarget) {
jQuery(e.currentTarget).children('ul').toggle();
e.stopPropagation();
e.preventDefault();
}
});
ul.level_2,
ul.level_3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="level_1">
<li class="sibling first"><a href="home.html" title="Home" class="sibling first" itemprop="url"><span itemprop="name">Home</span></a></li>
<li class="active submenu"><strong class="active submenu" aria-haspopup="true" itemprop="name">Brillen</strong>
<ul class="level_2" style="display: none;">
<li class="first"><a href="#" title="Herrenbrillen" class="first" itemprop="url"><span itemprop="name">Herrenbrillen</span></a></li>
<li class="last"><a href="#" title="Unterkategorie 1.1" class="last" itemprop="url"><span itemprop="name">Unterkategorie 1.1</span></a></li>
</ul>
</li>
<li class="submenu sibling"><a href="#" title="Sonnenbrillen" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Sonnenbrillen</span></a>
<ul class="level_2" style="display: block;">
<li class="submenu first"><a href="#" title="Varianten & mehr" class="submenu first" aria-haspopup="true" itemprop="url"><span itemprop="name">Varianten & mehr</span></a>
<ul class="level_3">
<li class="first"><a href="#" title="Produkte mit Varianten" class="first" itemprop="url"><span itemprop="name">Produkte mit Varianten</span></a></li>
<li><a href="#" title="Produkte mit Konfigurator" itemprop="url"><span itemprop="name">Produkte mit Konfigurator</span></a></li>
<li><a href="#" title="Produkte mit Staffelpreis" itemprop="url"><span itemprop="name">Produkte mit Staffelpreis</span></a></li>
<li class="last"><a href="#" title="Alle Sonnenbrillen" class="last" itemprop="url"><span itemprop="name">Alle Sonnenbrillen</span></a></li>
</ul>
</li>
<li><a href="#" title="Angebote" itemprop="url"><span itemprop="name">Angebote</span></a></li>
<li><a href="#" title="Neuheiten" itemprop="url"><span itemprop="name">Neuheiten</span></a></li>
<li class="last"><a href="#" title="Unterkategorie 2.1" class="last" itemprop="url"><span itemprop="name">Unterkategorie 2.1</span></a></li>
</ul>
</li>
<li class="submenu sibling"><a href="#" title="Kontaktlinsen" class="submenu sibling" aria-haspopup="true" itemprop="url"><span itemprop="name">Kontaktlinsen</span></a>
<ul class="level_2">
<li class="first last"><a href="#" title="Unterkategorie 3.1" class="first last" itemprop="url"><span itemprop="name">Unterkategorie 3.1</span></a></li>
</ul>
</li>
<li class="sibling"><a href="blog.html" title="Blog" class="sibling" itemprop="url"><span itemprop="name">Blog</span></a></li>
<li class="sibling"><a href="%C3%BCber-uns.html" title="Über Uns" class="sibling" itemprop="url"><span itemprop="name">Über Uns</span></a></li>
<li class="sibling last"><a href="kontakt.html" title="Kontakt" class="sibling last" itemprop="url"><span itemprop="name">Kontakt</span></a></li>
</ul>
这篇关于没有类的兄弟姐妹触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
