javascript - 创建下拉页面

Question

我创建了一个下拉页面，如下例所示:

这就是我希望它在单击侧面的箭头时显示的方式。

我将如何制作这样的东西，有没有任何例子可以让我学习来帮助我制作这个？

Answer 1

如果你会使用 jquery，你可以使用 hasClass、addClass 和 removeClass 来更改子菜单的高度

工作中Demo .

$(".btn").click(function() {
  if ($(".menu").hasClass("dropped")) {
    $(".menu").removeClass("dropped");
  } else {
    $(".menu").addClass("dropped");
  }
});

.menu {
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease 0s;
}

.dropped {
  height: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
  Dropdown
</button>
<div class="menu">
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
</div>