javascript - 通过单击按钮本身关闭下拉菜单

Question

我在这个网站上看到很多关于通过单击页面上的任意位置来关闭下拉菜单的问题。

不过我的问题有点不同。我不希望通过在下拉菜单外单击来关闭下拉菜单。当我点击显示菜单的按钮时，我希望菜单保持那样(下拉)直到用户再次点击同一个按钮。此外，在显示菜单的那一刻，我希望它将其他元素直接向下推。这些元素可以是例如其他按钮。你们可能在某些网站上看到过这个概念，我喜欢这个想法。我想创造同样的东西，但我不知道怎么做。

这可能会用 Javascript 制作，因为这更容易，但我不知道该怎么做。你们有什么想法或建议吗？

我将不胜感激。提前致谢。

编辑:这是我提到的一个例子:Link to jsfiddle -> https://jsfiddle.net/Cerebrl/uhykY/

我想在第一个菜单下拉时按下按钮 2 和 3，这样它就可以创建自己的显示空间。其次，菜单应该只在我按下按钮时关闭，而不是通过点击按钮以外的地方关闭。

Answer 1

你可以在两行中使用 toggleSlide 方法

$(function(){
  $('button').click(function(){
    $('ul').slideToggle();
  });
});

ul {
  background: none #FA982E;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}
ul a {
  display: block;
  padding: 5px 20px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button>
</p>
<ul id="menu-main">
  <li><a href="#">Menu item 1</a></li>
  <li><a href="#">Menu item 2</a></li>
</ul>