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

如果能够正确解释您的需求，那就太棒了。根据我的理解，你想要应用SlideToggle（）效果，并且应该可以看到Show All链接。检查一下，

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

Answer 2

这将使列表项目不会丢失其子弹：

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

jQuery下拉菜单 - slideToggle

2 个答案: