Bootstrap Dropdown offen halten, wenn sie innerhalb

Question

Ich habe ein Dropdown-Menü und Ich will es offen gehalten werden, wenn ich im Innern klicken geklickt (aber geschlossen, wenn sie außerhalb davon oder MENU geklickt wird.)

Es scheint so, Das Dropdown wird nicht geschlossen, wenn ich etwas in die input eintippe, aber es schließt sich, wenn ich irgendwo anders in das Dropdown-Menü klicke. Wie vermeide ich dies mit jQuery?

Unten ist mein Code:

HTML

<div id="navbar"> 
<nav class="navbar navbar-default navbar-static-top" role="navigation"> 

     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 

       <li class="dropdown"> 

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> 

        <div class="dropdown-menu"> 
         <p>HELLO</p> 
         <input> 

        </div> 
       </li> 
       </ul> 
     </div> 

Bootply DEMO

Answer 1

Sie können versuchen, Ihren Code wie folgt ....

zu machen

$(document).ready(function(){ 
 
\t $('.dropdown-toggle').on('click', function(event){ 
 
\t \t $('.dropdown-menu').slideToggle(); 
 
\t \t event.stopPropagation(); 
 
\t }); 
 
\t $(window).on('click', function(){ 
 
\t \t $('.dropdown-menu').slideUp(); 
 
\t }); 
 
\t $('.dropdown-menu').on('click', function(event){ 
 
\t \t event.stopPropagation(); 
 
\t }); 
 
});

.navbar {width: 80%; margin: auto; padding: 0px 12px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="navbar"> 
 
    <nav class="navbar navbar-default navbar-static-top" role="navigation"> 
 
     <ul class="nav navbar-nav"> 
 

 
      <li class="dropdown"> 
 

 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU</a> 
 

 
       <div class="dropdown-menu"> 
 
        <p>HELLO</p> 
 
        <input> 
 

 
       </div> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
</div>