fadeOut() not working. div reappears after fade-ing out

November 16, 2021

I made a navbar where the subnav is showing fullscreen on hover while the other subnavs close. The fullscreen subnav always stays open until you go to a new page.

I want to build in a close button so you can also close the subnav (no auto close on hover out!) by clicking on it and that works partially because it does fade out but it immediately fades back in again.

I think the problem is that the close button is in the hover div that triggers the fade-in of the subnav. Is there a way to overrule that with javascript?

$('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();
});

$('.close').click(function () {
  $('ul.dropdown-menu-main').fadeOut('fast');
});

* {
  padding:0;
  margin:0;
}

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:30px 0;
}

ul.dropdown-menu-main li {
  color:white;
}

.close {
  position:absolute;
  top:70px;
  left:0px;
  z-index:99;
  color:#aaaaaa;
}

<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</a>
    <ul class="dropdown-menu-main">
      
      <div class="close">
      close
      </div>
      
      <li>Sub 1</li>
    </ul>
  </li>
  
  <li class="menu-item-has-children">
    
    <a href="#">Main 2</a>
    <ul class="dropdown-menu-main">
      
      <div class="close">
      close
      </div>
      
      <li>Sub 2</li>
    </ul>
    
  </li>
</ul>

>Solution :

Don’t target the whole <li>, just target the <a> inside.

However, keep in mind that a drawer or a menu must always be easier to close than to open. Having a full-page overlay that opens easily on hover, but requires a click to go away is irritating and a no-go from a UX standpoint.

$('li.menu-item-has-children a').hover(function() {
  const $this = $(this);
  $this.next(".dropdown-menu-main").fadeIn('slow')

  $this.parent().siblings()
    .find('ul.dropdown-menu-main')
    .fadeOut();
});

$('.close').click(function(e) {
  $('ul.dropdown-menu-main').fadeOut('slow');
});

* {
  padding: 0;
  margin: 0;
}

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: 30px 0;
}

ul.dropdown-menu-main li {
  color: white;
}

.close {
  position: absolute;
  top: 70px;
  left: 0px;
  z-index: 99;
  color: #aaaaaa;
}

<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</a>

    <ul class="dropdown-menu-main">

      <div class="close">
        close
      </div>

      <li>Sub 1</li>
    </ul>
  </li>

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

    <a href="#">Main 2</a>
    <ul class="dropdown-menu-main">

      <div class="close">
        close
      </div>

      <li>Sub 2</li>
    </ul>

  </li>
</ul>