ボタン自体をクリックしてドロップダウンメニューを閉じる

Question

このページでは、ページのどこかをクリックしてドロップダウンメニューを閉じることについて多くの質問がありました。

私の質問はちょっと違います。私はそれの外をクリックしてドロップダウンメニューを閉じることを望んでいません。私がメニューを表示しているボタンをクリックすると、同じボタンを再びクリックするまで、メニューはそのように（ドロップダウン）維持されます。また、メニューが表示されている瞬間、他の要素を直接下に押し込むようにしたい。これらの要素は、例えば他のボタンであってもよい。皆さんはこのコンセプトをいくつかのウェブサイトで見たことがあり、そのアイデアが好きです。私は同じことを作りたいと思っていますが、どうしたらいいか分かりません。

これはおそらくJavascriptで作成されますが、これは簡単ですが、その方法はわかりません。みんなにアイデアやヒントはありますか？

私は非常に感謝します。前もって感謝します。

編集：ここで私はメンターものの例です：Link to jsfiddle ->https://jsfiddle.net/Cerebrl/uhykY/

私は最初のメニューは、ドロップダウンなので、それが表示するために自分のスペースです作成することができた瞬間にボタン2を押し下げたいと3。第2に、メニューは、ボタンを押した瞬間を閉じるだけでなく、そのボタンをクリックすることで閉じることができます。

Answer 1

あなたは、あなたには、いくつかのコードやフィドルを投稿することができ

$(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>

Answer 2

メニューにコンテンツをプッシュしたい場合は、通常のフローに入れてください。何が必要シンプルなjQueryのslideToggle methodと、デフォルトでメニューを非表示にするには次のとおりです。

$('[data-toggle]').on('click', function(e){ 
 
\t 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 playground