CODEWITHSUNDEEP
jquery
Kamal
Kamal

Reputation: 2180

Drop Down menu in Jquery

hello friends i have tryied folowing code as u can see here http://jsfiddle.net/QCdz4/ i want to code for drop down menu to appear on click() and disappear when mouseout() but its not working please help me out Thank in advance

Jquery

<script>
    $(document).ready(function(){
        $('.click ul').css({display:'none', position:'absolute'});
        $('.click').click(function() {
            $(this).children('ul').slideDown(200);
            $(this).on('mouseout', function() {
                $(this).children('ul').slideUp(200);
            })
        })
    })
</script>

HTML

<div class="click">
    click
    <ul>
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>

Upvotes: 2

Views: 470

Answers (4)

ThdK
ThdK

Reputation: 10556

You need mouseleave instead of mouseout because mouseout will also be triggered when you hover from the parent to a child element. The child element positioned above (read: z-index) the parent. Moving the cursor in this case from parent to child element will trigger the mouseout event but not the mouseleave event. The mouseleave element will only be triggered when you move the cursor away from the parent AND it's children. 

$(document).ready(function(){

   $('.click ul').css({display:'none', position:'absolute'});


   $('.click').on('click', function(){
       $("ul", $(this)).slideDown(200);
   }).on('mouseleave', function(){
       $("ul", $(this)).slideUp(200);
   });   


})

Update: A very good article with a very clear live demo can be found here: Different between mouseout and mouseleave in jquery. (Check out the the square's with child elements. The one on the bottom right)

Upvotes: 2

Starx
Starx

Reputation: 78981

You are chaining your function the wrong way.

$('.click').click(function(){
     $(this).children('ul').slideDown(200);
}).on('mouseout', function(){
    $(this).children('ul').slideUp(200);
});

Improving the above code,

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseout', function(){
    $("ul", $(this)).slideUp(200);
});

Update

To ensure a event triggers once the cursor is outside the element, you have to use mouseleave instead of mouse out

$('.click').on('click', function(){
     $("ul", $(this)).slideDown(200);
}).on('mouseleave', function(e){
        $("ul", $(this)).slideUp(200);
});

Demo

Upvotes: 0

Jassi Oberoi
Jassi Oberoi

Reputation: 1424

use this

$(document).ready(function(){
    $('.click ul').css({display:'none', position:'absolute'});
$('.click').click(function(){

     $(this).children('ul').slideDown(200);
})

$('.click ul').hover(
  function () {
    // do nothing
  }, 
  function () {
    $('.click ul').slideUp(200);
  }
);
});

Upvotes: 1

rt2800
rt2800

Reputation: 3045

Move the binding of mouseout event outside binding of click event

$(document).ready(function(){

$('.click ul').css({display:'none', position:'absolute'});

$('.click').click(function(){

 $(this).children('ul').slideDown(200);

}) $('.click').on('mouseout', function(){

$(this).children('ul').slideUp(200); })

})​

Upvotes: 0

Related Questions