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之类的选择器将适用于li.menu-item内的每个span，无论深度如何（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>

jquery在悬停时显示当前元素

1 个答案: