#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0

    Angry Jquery if true statements help


    Hi everyone,

    I'm trying to make the drop down menu only disappear when both the hovered list item and the dropdown menu itself are not hovered.

    I'm building on what I've written below which currently makes the submenu appear only when the li item is hovered but it disappears when the submenu is hovered which I'm trying to rectify.

    jQuery:
    Code:
    				
    <script> 		
    $(document).ready(function () {     
    $("#top-menu li:nth-child(1)").hover(   
    function () {      $('#menu1_dropdown').slideDown('fast');   },    
    function () {      $('#menu1_dropdown').slideUp('fast');   } );  }); 		 		
    </script>

    HTML
    Code:
    <div id="top-menu"> 
    <li>item 1</li>
    <li>item 2</li>
    <li>item3</li>
    </div>
    
    ...somewhere else in DOM:
    <div id="menu1_dropdown">
    menu 1 dropdown
    </div>
    Code:
    <style>#menu1_dropdown {display:none'}

    I think i need an if statement to say only use call back slideup when .mouseout is true for both the li item and submenu but i'm running into problems. Can anyone assist?
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,153
    Rep Power
    183
    You could do something like this:

    Code:
    <style>
    #menu1_dropdown {
    display:none;
    }
    </style>
    
    <script> 		
    $(document).ready(function() {
    
    $("#top-menu li:nth-child(1)").hover(function(){
    $('#menu1_dropdown').slideDown('fast');
    });
    
    $("#top-menu").mouseleave(function(){
    $('#menu1_dropdown').slideUp('fast');
    });
    
    }); 		
    </script>
    
    <div id="top-menu"> 
    <li>item 1</li>
    <li>item 2</li>
    <li>item3</li>
    
    ...somewhere else in DOM:
    <div id="menu1_dropdown">
    menu 1 dropdown
    </div>
    
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    5
    Rep Power
    0
    Thanks so much for the response, i found some code that got it working in the end, below - hope this helps someone:

    Code:
                   $(document).ready(function () { var count = 0; $('#top-menu li:nth-child(1), #menu_expansion').mouseenter(function(){     count++;     $('#menu_expansion').show(); }).mouseleave(function(){     count--;     if (count == 0) {          $('#menu_expansion').hide();     } });   });

IMN logo majestic logo threadwatch logo seochat tools logo