$(document).ready(function() {
$('.cats_showall').click(function() {
$('.cats_dropdown li').slideToggle();
});
});
.cats_dropdown li {
display: none;
}
.cats_dropdown>li:first-child {
display: list-item;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
但是它不起作用。请帮助:)
这将使列表项不会丢失子弹:
$(document).ready(function(){
$('.cats_showall').click(function(){
$('.cats_dropdown li:not(:first)').slideToggle(function() {
if($(this).is(':visible')) {
$(this).css('display','list-item');
}
});
});
});
如果您能正确解释您的需求,那将是很好的。根据我的理解,您想应用SlideToggle()效果,“显示全部”链接应该可见。检查一下,
$(document).ready(function(){
$('.cats_showall').click(function(){
$('.cats_dropdown li:not(:first)').slideToggle();
});
});