javascript - jquery 在悬停时显示当前元素

Question

所以我使用此代码在菜单中显示深度 3 的元素(wordpress):

var hoverTimeout;  

    $( "span.sub2 li.menu-item-has-children" ).hover(function(){
        hoverTimeout = setTimeout(function() {$('ul .sub2 li .sub-menu .sub2').css("display", "block");}, 500);
    }, function() {
        clearTimeout(hoverTimeout);
        $('ul .sub2 li .sub-menu .sub2').css("display", "none");
    });


    $( "span.sub2 li.menu-item-has-children" ).mouseleave(function() {
      $('ul .sub2 li .sub-menu .sub2').css("display", "none");
    });

问题是，当我将鼠标悬停在一个带有子菜单的元素上时，所有带有子菜单的元素都会显示。

问题是:

如何只显示当前鼠标悬停的一个子菜单？

抱歉标签，无法添加“jquery”

编辑:

HTML:

<nav id="menu" class="menu-main-navigation-container"><ul id="menu-main-navigation" class=""><li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-5 current_page_item menu-item-177"><a href="http://ekochem-tech.pl/">Strona główna</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://ekochem-tech.pl/o-firmie/">O firmie</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19"><a href="http://ekochem-tech.pl/oferta/">Oferta</a><ul class="sub-menu"><span class="sub2">  <li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-123"><a href="http://ekochem-tech.pl/oferta/sprzedaz-plynow-chlodniczych-i-wody-demineralizowanej/">Sprzedaż płynów chłodniczych i wody demineralizowanej</a><ul class="sub-menu"><span class="sub2">       <li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-435"><a href="http://ekochem-tech.pl/producent-wody-demineralizowanej/">Producent wody demineralizowanej</a></li>
        <li id="menu-item-436" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-436"><a href="http://ekochem-tech.pl/plyny-instalacji-przemyslowych/">Płyny do instalacji przemysłowych i CO</a></li>
        <li id="menu-item-437" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-437"><a href="http://ekochem-tech.pl/inhibitory-korozji/">Inhibitory korozji</a></li>
</ul></span></li>
    <li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://ekochem-tech.pl/oferta/analizy-badania-czystosci-i-stopnia-zuzycia-plynow-chlodniczych/">Analizy, badania czystości i stopnia zużycia płynów chłodniczych</a></li>
    <li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-120"><a href="http://ekochem-tech.pl/oferta/napelnianie-i-oproznianie-instalacji-chlodniczych/">Napełnianie i opróżnianie instalacji chłodniczych</a></li>
    <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a href="http://ekochem-tech.pl/oferta/plukanie-chemiczne-czyszczenie-lub-trawienie-urzadzen-i-ciagow-technologicznych/">Płukanie, chemiczne czyszczenie lub trawienie urządzeń i ciągów technologicznych</a></li>
    <li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://ekochem-tech.pl/oferta/plyny-niezamarzajace-do-domkow-letniskowych/">Płyny niezamarzające do domków letniskowych</a></li>
</ul></span></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://ekochem-tech.pl/kontakt/">Kontakt</a></li>
</ul></nav> 

Answer 1

问题在于，像 span li.menu-item 这样的选择器将应用于 span 内的每个 li.menu-item，无论深度(它是 descendant selector )。您应该使用 child selectors仅针对直接子级，例如 span > li.menu-item。

编辑:更新为包括根据问题的延迟。如果没有延迟，您可以完全在 CSS 中完成此操作。不过，为了让延迟起作用，使用 JavaScript 添加一个类来指示用户何时悬停足够长的时间以触发显示并保持其在 CSS 中的外观可能更容易。

var timeout;

$('.menu-item').hover(function() {

  var element = $(this);

  timeout = setTimeout(function() {
    element.addClass('hovering');
  }, 200);

}, function() {

  clearTimeout(timeout);
  $(this).removeClass('hovering');

});

li.menu-item {
  cursor: pointer;
}

.sub-menu {
  display: none;
}

li.menu-item.hovering > ul {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-navigation">
  <li class="menu-item">Item 1</li>
  <li class="menu-item menu-item-has-children">
    Sub menu
    <ul class="sub-menu">
      <li class="menu-item menu-item-has-children">
        Sub-sub menu
        <ul class="sub-menu">
          <li>2 Level Nested</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>