jQuery Menu déroulant - 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> 

Mais cela ne fonctionne pas. S'il vous plaît aider :)

Answer 1

Cela permet de garder la liste des articles de perdre leurs balles:

$(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

Ce serait génial si vous pouvez expliquer correctement ce dont vous avez besoin. Selon ce que je comprends, vous voulez appliquer l'effet SlideToggle() et le lien Afficher tout devrait être visible. vérifier,

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