jQuery的下拉菜单 - 的slideToggle

Question

jQuery的

$(document).ready(function(){ 
    $('.cats_showall').click(function(){ 
     $('.cats_dropdown li').slideToggle();  
    }); 
}); 

CSS

.cats_dropdown li{ 
    display: none; 
} 
.cats_dropdown > li:first-child{ 
    display: list-item; 
} 

HTML

<ul class="cats_dropdown"> 
    <li>Category 1 - <a href="#" class="cats_showall">Show all</a></li> 
    <li>Category 2</li> 
    <li>Category 3</li> 
    <li>Category 4</li> 
</ul> 

但它不工作。请帮忙:)

Answer 1

这将让列表项目失去他们的子弹：

$(document).ready(function(){ 
     $('.cats_showall').click(function(){ 
       $('.cats_dropdown li:not(:first)').slideToggle(function() { 
        if($(this).is(':visible')) { 
         $(this).css('display','list-item'); 
        } 
       }); 
     }); 
}); 

Answer 2

如果你能正确解释你需要什么，这将是非常好的。 根据我的理解，您希望应用SlideToggle（）效果，并且“显示全部”链接应该可见。 检查此，

$(document).ready(function(){ 
    $('.cats_showall').click(function(){ 
     $('.cats_dropdown li:not(:first)').slideToggle();   
    }); 
});