CODEWITHSUNDEEP
javascriptwordpress
michal
michal

Reputation: 35

jquery display current element on hover

So I use this code to display depth 3 elements in menu (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");
    });

Problem is that when I hover on one element with sub-menu, all elements with sub-menus get displayed.

Question is:

How to display only one sub menu that I'm hovering my mouse at the moment?

sorry for tags, couldn't add "jquery"

edit:

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>

Upvotes: 1

Views: 737

Answers (1)

Tom Davies
Tom Davies

Reputation: 899

The problem is that a selector like span li.menu-item will apply to every li.menu-item within the span regardless of depth (it's a descendant selector). You should use child selectors to only target the immediate children, like this span > li.menu-item.

Edit: updated to include delay as per question. Without the delay you could do this entirely in CSS. For the delay to work though, it's most likely easier to use JavaScript to add a class that indicates when the user has been hovering for long enough to trigger the display and keep how that should look in your 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>

Upvotes: 1

Related Questions