Schließen Dropdown-Menü durch Klicken auf die Schaltfläche selbst

Question

Ich habe eine Menge Fragen auf dieser Website zum Schließen eines Dropdown-Menüs durch Klicken auf eine beliebige Stelle auf der Seite gesehen.

Meine Frage ist ein bisschen anders, obwohl. Ich möchte nicht, dass das Dropdown-Menü geschlossen wird, indem Sie darauf klicken. In dem Moment, in dem ich auf den Knopf klicke, der mir das Menü zeigt, möchte ich, dass das Menü so bleibt (Drop-down), bis der Benutzer diese Taste erneut anklickt. In dem Moment, in dem das Menü angezeigt wird, möchte ich, dass die anderen Elemente direkt darunter verschoben werden. Diese Elemente könnten beispielsweise andere Schaltflächen sein. Ihr habt vielleicht dieses Konzept auf einigen Websites gesehen und ich mag die Idee. Ich möchte das gleiche schaffen, aber ich weiß nicht wie.

Dies wird wahrscheinlich mit Javascript gemacht werden, da dies einfacher ist, aber ich weiß nicht, wie es geht. Habt ihr Ideen oder Tipps?

Ich wäre sehr dankbar. Danke im Voraus.

Edit: Hier ist ein Beispiel dafür, was ich ment: Link to jsfiddle ->https://jsfiddle.net/Cerebrl/uhykY/

Ich möchte Taste 2 nach unten drücken und 3 in dem Moment das erste Menü Tropfen abgestürzten ist, so dass er seinen eigenen Platz zum Anzeigen erstellen können. Und zweitens sollte das Menü nur in dem Moment geschlossen werden, in dem ich den Knopf drücke und nicht, wenn ich außerhalb davon klicke.

Answer 1

können Ihre toggleSlide Methode in zwei Zeilen wie

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

Wenn Sie möchten, dass das Menü den Inhalt unten drückt, dann legen Sie es in normalen Fluss. Was Sie brauchen, ist eine einfache jQuery slideToggle method und das Menü standardmäßig zu verbergen:

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

Da das Menü keine absolute oder feste Position hat, wird es den Inhalt unten schieben. JSFiddle playground