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

Question

我在这个wesite上看到了很多有关单击页面上任何地方来关闭下拉菜单的问题。

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

这可能将使用Javascript来完成，因为这样做更容易，但是我不知道该怎么做。 你们有什么想法或提示吗？

我会很感激。 提前致谢。

编辑：这是我Link to jsfiddle ->的示例： Link to jsfiddle -> https://jsfiddle.net/Cerebrl/uhykY/

我想在第一个菜单被下拉时按下按钮2和3，以便它可以创建自己的显示空间。 其次，菜单应该仅在按下按钮时关闭，而不是在按钮外部单击。

Answer 1

如果要菜单将内容推送到下面，则将其置于正常流程中。 您需要一个简单的jQuery的slideToggle方法，并默认隐藏菜单：

 $('[data-toggle]').on('click', function(e){ e.preventDefault; var thisLink = $(this); var toToggle = $( thisLink.data('toggle') ); toToggle.slideToggle(200); }) 

 * { font-family: sans-serif; } .toggle-menu a { display: block; float: right; padding: 5px 20px; text-align: center; background: none #F1B475; cursor: pointer; } #menu-main { background: none #FA982E; margin: 0; padding: 0; list-style: none; display: none; } #menu-main a { display: block; padding: 5px 20px; text-decoration: none; } #menu-main a:hover, #menu-main a:focus { background: none #D0812D; } 

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

由于菜单没有绝对或固定位置，因此它将内容压入其下方。 JSFiddle游乐场

Answer 2

您可以在两行中使用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>