通過單擊按鈕本身來關閉下拉菜單

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>