CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

slideDown immediate li and slide up other li elements

I want to slideUp all li element and slideDown li elements under current ul element

$(document).ready(function(){
    $("li").slideUp();
});

$(".nav").hover(function(e){
    $(this).children("li").slideDown();
    $("li").slideUp();
    e.stopPropogation();
});

this is the fiddle

Problem is it is sliding up everything in the end What is the mistake i have done?

Upvotes: 1

Views: 1594

Answers (4)

Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

I added a class to fix this issue

     $(document).ready(function(){
         $("li").slideUp();
        });

         $(".nav").hover(function(e){
            $("li").removeClass();
            $(this).children("li").addClass("current").slideDown();
            $("li:not(.current)").slideUp();
            e.stopPropogation();
         });

Fiddle link

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You need to target the LIs of all other navs excluding the current one, so use not:

e.g.

 $(".nav").hover(function (e) {
     $(this).children("li").slideDown();
     $(".nav").not(this).find("li").slideUp();
     e.stopPropogation();
 });

JSDFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/46/

As you are having issues of overlapping actions, the usual "fix" is to stop prior animations so they at least do not chain and run to completion:

 $(".nav").hover(function (e) {
     $(this).children("li").stop(true,true).slideDown();
     $(".nav").not(this).find("li").stop(true,true).slideUp();
     e.stopPropogation();
 });

JSFiddle: http://jsfiddle.net/TrueBlueAussie/kcGZJ/55/

Upvotes: 3

Nisha
Nisha

Reputation: 685

According to your code $(this).children("li").slideDown(); makes all li to slide down. And, $("li").slideUp(); will make all li slideup!!

Please do

$(".nav").hover(function (e) {
 $(".nav").not(this).find("li").slideUp();
 $(this).children("li").slideDown();
 e.stopPropogation();

});

refer jQuery not

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can separate your hover() event hook in to two calls, one for mouseenter and another for mouseleave. On mouseenter you want to slideDown() the li in the current ul. In the mouseleave, you want to make them all slideUp(). Try this:

$(".nav").hover(function () {
    $(this).children("li").slideDown();
}, function() {
    $("li").slideUp();
});

Updated fiddle

Upvotes: 3

Related Questions