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这样的选择器。菜单项将应用于每个li。span中的菜单项，与深度无关（它是一个后代选择器）。您应该使用子选择器只针对直接的子对象，如下span

编辑：根据问题更新以包括延迟。没有延迟，您可以完全使用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>