Open child div on hover parent and close other child divs ( w/ Javascript)-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>