jquery - 如何使用 css、javascript 和 html 扩展下拉菜单？

Question

我的页面中有一个下拉菜单，当用户单击下拉菜单按钮时，该按钮应展开并显示数据。

这就是我想要的

这是HTML

<div claa="demo">
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>

在 css 中，我尝试将边框设置为无，但该解决方案看起来非常糟糕，可以帮助我需要做些什么来获得我想要的东西吗？

标签： jqueryhtmlcss

Answer 1

向 Button 添加一个类以进行展开/折叠，并以该类为目标来控制 ul 元素。

例如：

.expand + ul {display: block;}
.collapse + ul {display: none;}