Question 31018 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Open child div on hover parent and close other child divs ( w/ Javascript) – WordPress

When I open a child div on hover with Javascript it works, also when I hover over the next parent div that child div opens but when I go back to the first parent the second one stays open (on top) and doesn’t fade-out.

What I would like is that the other child div(‘s) close when hovering to a new one. Maybe good to know is that I only want the other child div(s) to close when hovering to a new parent with a child div not when im just hovering out of the current parent.

Does anyone know the trick?

$('li.menu-item-has-children').hover(function () {
  $('ul.dropdown-menu-main', this).fadeIn('slow');
});
ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
  
    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution when 'parent()' and 'children()' are not 'this'.

    $('li.menu-item-has-children').hover(function () {
  $('ul.dropdown-menu-main', this).fadeIn('slow');
  $(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut('fast');
});
    ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:50px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">
  
    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>


  2. 0

    Sorry have just re-read your question and realised you wanted the menu to stay active. I’ve created a demonstration which does this by adding an .active class and toggling the submenus are you initially wanted using fadeIn and fadeOut. This will also allow you to attribute css styles to the dropdown if you would rather use that rather than jquery.

    // Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {

  // Remove active class from all menus
  $(".menu-item-has-children.active").toggleClass();
  
  // Add toggle class to this menu
  $(this).toggleClass("active");
  
  // Fade out existing dropdown menus
  $(".dropdown-menu-main").fadeOut('slow');
  
  // Fade in this child dropdown menu
  $(this).find(".dropdown-menu-main").fadeIn('slow');

});

    The second example I will leave up for others, it shows how to do a more traditional dropdown where it fades out once the hover leaves the parent. You can use the exit function as well as the entry function of hover, the first function you provide is ran on mouseenter and the second on mouseleave.

    Jquery .hover()

    EXAMPLE WITH PERSISTENT DROPDOWNS

    // Toggle function on hover, ignore if already active
$(".menu-item-has-children:not('.active')").hover( function() {

  // Remove active class from all menus
  $(".menu-item-has-children.active").toggleClass();
  
  // Add toggle class to this menu
  $(this).toggleClass("active");
  
  // Fade out existing dropdown menus
  $(".dropdown-menu-main").fadeOut('slow');
  
  // Fade in this child dropdown menu
  $(this).find(".dropdown-menu-main").fadeIn('slow');

});
    ul, ul li {
  list-style:none;
  padding:0;
  margin:0;
}

li {
  display: inline-block;
  position: relative;
  margin-right:20px !important;
}

ul.dropdown-menu-main {
  display:none;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  height:100vh;
  background:black;
  z-index:-1;
  padding:50px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul>
  <li class="menu-item-has-children">

    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>

    EXAMPLE WITH TRADITIONAL DROPDOWNS
    These collapse when the hovering over the parent ends.

    // Hover function
$('li.menu-item-has-children').hover(

  // Hover in function
  function() {
    $('ul.dropdown-menu-main', this).fadeIn('slow');
  },

  // Hover exit function
  function() {
    $('ul.dropdown-menu-main', this).fadeOut('slow');
  }

);
    ul,
ul li {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: inline-block;
  position: relative;
  margin-right: 20px !important;
}

ul.dropdown-menu-main {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: black;
  z-index: -1;
  padding: 50px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<ul>
  <li class="menu-item-has-children">

    <a href="#">Main 1</div>
    <ul class="dropdown-menu-main">
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</div>
    <ul class="dropdown-menu-main">
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search