jQuery 下拉菜单 - SlideToggle

标签 jquery html css slidetoggle

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

但是这不起作用。请帮忙:)

最佳答案

如果您能正确解释您的需求,那就太好了。 根据我的理解,您想要应用 SlideToggle() 效果,并且“显示全部”链接应该可见。 检查一下,

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

关于jQuery 下拉菜单 - SlideToggle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1265402/

相关文章:

javascript - 如何限制或限制用户仅在服务器端上传图像文件而不是在客户端

javascript - 为什么 jQuery 代码不使用方法原型(prototype)?

javascript - 尽管有 z-index,但动画 DIV 隐藏的跨度文本

css - 导航栏不显示

css - Firefox:未显示本地托管的网络字体 - 即使使用 Access-Control-Allow-Origin "*"

jquery Ajax - 如何在更改选择元素时复制发布带有名称的按钮(ajax 请求中的动态键名称)

javascript - 在特定日期和时间突出显示下一个 <li>

javascript - 喜欢 Mootools 1.4.1 的常见问题解答吗?

Javascript 输入字段应在键入时附加到 div 中

javascript - toggleClass 显示导航问题