没有类触发事件的兄弟姐妹

时间：2018-12-11 08:42:52

标签： jquery html

我正在构建一个可折叠的导航栏。

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 &amp; mehr" class="submenu first" aria-haspopup="true" itemprop="url"><span itemprop="name">Varianten &amp; 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中单击某个项目，则该菜单将折叠，即使它没有“ submenu”类。 我希望带有“ submenu”类的项目充当切换按钮，其余的充当链接。

1 个答案:

答案 0 :(得分：0)

您的父级点击是在点击子级时触发的，您可以使用e.stopPropagation();来阻止它，但是您必须阻止它。

像这样

 $("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 &amp; mehr" class="submenu first" aria-haspopup="true" itemprop="url"><span itemprop="name">Varianten &amp; 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>

或更好的方法 只是检查

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 &amp; mehr" class="submenu first" aria-haspopup="true" itemprop="url"><span itemprop="name">Varianten &amp; 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>

相关问题
最新问题