Hope Hope - 4 months ago 13
jQuery Question

Close menu when another item is hovered

I am creating a menu with two dropdowns. I need the dropdowns to open when the menu item is hovered over, but close if the other menu item is hovered over.

The problem I am having is getting the first dropdown to close if I hover over the second menu item.

Please see my fiddle here: http://www.bootply.com/uEKWCdNj4C

I've looked through other questions, and this one seems to possibly be of use, but I'm having trouble applying it to my situation: Vertical Menu to stay open on hover then close when another is hovered

So I apologize if this is a duplicate...any help would be appreciated. Thanks!

Answer

You can call slideup on the open ul before calling slidedown on the current one. like below

$(document).ready(function () {

  $(".nav-basic").hover(function () {
      $('ul.menu-applied').slideUp('medium');   
      $('ul.menu-basic').slideDown('medium');
  });
  $('ul.menu-basic').bind('mouseleave', function(){
     $('ul.menu-basic').slideUp('medium'); 
  }); 

  $(".nav-applied").hover(function () {
      $('ul.menu-basic').slideUp('medium');     
      $('ul.menu-applied').slideDown('medium');
  });
  $('ul.menu-applied').bind('mouseleave', function(){
     $('ul.menu-applied').slideUp('medium'); 
  });


});
Comments