创建CSS折叠式菜单

Question

我想使用CSS和HTML（以及JavaScript，如果需要）创建一个菜单，就像一个普通的手风琴移动菜单。我希望所有列表元素都可以点击，并且在有子项的标签上，我想在它旁边放一个箭头，点击时打开下拉列表。这样我可以将主列表元素的文本用作打开该特定页面的按钮。

`<ul class="nav-menu">
<li class=""><a href="">About</a></li>
<li class=""><a href="">News</a></li>
<li class="has_children"><a href="">Events</a>
    <ul class="sub-menu">
    <li><a href="">For Children</a></li>
    <li><a href="">For Students</a></li>
    <li><a href="">For Families</a></li>
    </ul>
</li>
<li class=""><a href="">Contact</a></li>
</ul>`

在尝试开发自己的方法时，我一直在寻找这种方法的好脚本。我对HTML没有很大的控制权，因为我正在使用Wordpress中生成的菜单，其HTML类似于上面的内容。

谢谢！

Answer 1

我会将一个课程列入可折叠列表，并使用.second .first - ＆gt;进行切换。 http://api.jquery.com/slidetoggle/

您可以为其设置默认jQuery，使其不可见。之后，在“事件”中添加一个类以触发click事件，并为幻灯片输入/输出制作动画。对于箭头，您可以使用img并将其与slideToggle()对齐。之后，您可以在同一个点击事件中将另一个类切换到img，您也可以切换childern。这个类旋转img，使箭头显示正确的方式。

了解flexbox：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在工作代码段下方。

display: none;

flexbox

$(".clickme").click(function() {
  // toggle children
  $(".collapsible").slideToggle("slow", function() {});

  // rotate arrow
  $('.arrow').toggleClass('rotate');
});