Wenn ich auf Drop-Down-Menü in Bootstrap klicken öffnet es und dann automatisch schließen

body { 
 
    padding-top: 50px; 
 
} 
 
.dropdown.dropdown-lg .dropdown-menu { 
 
    margin-top: -1px; 
 
    padding: 6px 20px; 
 
} 
 
.input-group-btn .btn-group { 
 
    display: flex !important; 
 
} 
 
.btn-group .btn { 
 
    border-radius: 0; 
 
    margin-left: -1px; 
 
} 
 
.btn-group .btn:last-child { 
 
    border-top-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
.form-horizontal .btn[type="submit"] { 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 
.form-horizontal .form-group { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
.form-group .form-control:last-child { 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    #adv-search { 
 
     width: 500px; 
 
     margin: 0 auto; 
 
    } 
 
    .dropdown.dropdown-lg { 
 
     position: static !important; 
 
    } 
 
    .dropdown.dropdown-lg .dropdown-menu { 
 
     min-width: 500px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title></title> 
 
\t \t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
 
\t \t <link rel="stylesheet" href="css/style.css"> 
 
\t \t <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 
\t \t <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
 
\t </head> 
 
<body> 
 
<div class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-12"> 
 
\t \t \t <form class="form-horizontal" role="form"> 
 
\t \t \t \t <div class="input-group" id="adv-search"> 
 
\t \t \t \t \t <input type="text" class="form-control" placeholder="Search for snippets" /> 
 
\t \t \t \t \t <div class="input-group-btn"> 
 
\t \t \t \t \t \t <div class="btn-group" role="group"> 
 
\t \t \t \t \t \t \t <div class="dropdown dropdown-lg"> 
 
\t \t \t \t \t \t \t \t <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> 
 
\t \t \t \t \t \t \t \t <div class="dropdown-menu dropdown-menu-right" role="menu"> 
 
\t \t \t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t \t \t <label for="filter">Filter by</label> 
 
\t \t \t \t \t \t \t \t \t \t <select class="form-control"> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="0" selected>All Snippets</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="1">Featured</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="2">Most popular</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="3">Top rated</option> 
 
\t \t \t \t \t \t \t \t \t \t \t <option value="4">Most commented</option> 
 
\t \t \t \t \t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t \t \t <label for="contain">Author</label> 
 
\t \t \t \t \t \t \t \t \t \t <input class="form-control" type="text" /> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t \t \t \t \t <label for="contain">Contains the words</label> 
 
\t \t \t \t \t \t \t \t \t \t <input class="form-control" type="text" /> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </form> 
 
\t \t </div> 
 
\t </div> 
 
</body>

ich voraus Suche nach PHP-Projekt zu erstellen versuchen. aber mein Problem ist, dass wenn ich auf das interne Dropdown-Menü klicke - es öffnet sich, aber dann lasse ich die Maustaste los, es wird automatisch geschlossen.

Ich benutze Bootstrap 3.3.6.

body { 
 
    padding-top: 50px; 
 
} 
 
.dropdown.dropdown-lg .dropdown-menu { 
 
    margin-top: -1px; 
 
    padding: 6px 20px; 
 
} 
 
.input-group-btn .btn-group { 
 
    display: flex !important; 
 
} 
 
.btn-group .btn { 
 
    border-radius: 0; 
 
    margin-left: -1px; 
 
} 
 
.btn-group .btn:last-child { 
 
    border-top-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
.form-horizontal .btn[type="submit"] { 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 
.form-horizontal .form-group { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
.form-group .form-control:last-child { 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    #adv-search { 
 
     width: 500px; 
 
     margin: 0 auto; 
 
    } 
 
    .dropdown.dropdown-lg { 
 
     position: static !important; 
 
    } 
 
    .dropdown.dropdown-lg .dropdown-menu { 
 
     min-width: 500px; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title></title> 
 
\t \t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css"> 
 
\t \t <link rel="stylesheet" href="css/style.css"> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <form class="form-horizontal" role="form"> 
       <div class="input-group" id="adv-search"> 
        <input type="text" class="form-control" placeholder="Search for snippets" /> 
        <div class="input-group-btn"> 
         <div class="btn-group" role="group"> 
          <div class="dropdown dropdown-lg"> 
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button> 
           <div class="dropdown-menu dropdown-menu-right" role="menu"> 
            <div class="form-group"> 
             <label for="filter">Filter by</label> 
             <select class="form-control"> 
              <option value="0" selected>All Snippets</option> 
              <option value="1">Featured</option> 
              <option value="2">Most popular</option> 
              <option value="3">Top rated</option> 
              <option value="4">Most commented</option> 
             </select> 
            </div> 
            <div class="form-group"> 
             <label for="contain">Author</label> 
             <input class="form-control" type="text" /> 
            </div> 
            <div class="form-group"> 
             <label for="contain">Contains the words</label> 
             <input class="form-control" type="text" /> 
            </div> 
            <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
           </div> 
          </div> 
          <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
         </div> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</body>

Quelle

2016-08-31 raju

Nicht in der Lage @raju –

Ereignis Sprudeln der Hauptschuldige ist und Sie können aufhören, dass die Verwendung event.stopPropagation(); für Ihren erweiterten dropdown-menu und es schließt sich, wenn Klick auf erweiterten Dropdown-Menü.

$('.dropdown-menu').on('click', function(event) { 
 
    event.stopPropagation(); 
 
});

body { 
 
    padding-top: 50px; 
 
} 
 
.dropdown.dropdown-lg .dropdown-menu { 
 
    margin-top: -1px; 
 
    padding: 6px 20px; 
 
} 
 
.input-group-btn .btn-group { 
 
    display: flex !important; 
 
} 
 
.btn-group .btn { 
 
    border-radius: 0; 
 
    margin-left: -1px; 
 
} 
 
.btn-group .btn:last-child { 
 
    border-top-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
} 
 
.form-horizontal .btn[type="submit"] { 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 
.form-horizontal .form-group { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 
.form-group .form-control:last-child { 
 
    border-top-left-radius: 4px; 
 
    border-bottom-left-radius: 4px; 
 
} 
 
@media screen and (min-width: 768px) { 
 
    #adv-search { 
 
    width: 500px; 
 
    margin: 0 auto; 
 
    } 
 
    .dropdown.dropdown-lg { 
 
    position: static !important; 
 
    } 
 
    .dropdown.dropdown-lg .dropdown-menu { 
 
    min-width: 500px; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     <form class="form-horizontal" role="form"> 
 
     <div class="input-group" id="adv-search"> 
 
      <input type="text" class="form-control" placeholder="Search for snippets" /> 
 
      <div class="input-group-btn"> 
 
      <div class="btn-group" role="group"> 
 
       <div class="dropdown dropdown-lg"> 
 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span> 
 
       </button> 
 
       <div class="dropdown-menu dropdown-menu-right" role="menu"> 
 
        <div class="form-group"> 
 
        <label for="filter">Filter by</label> 
 
        <select class="form-control"> 
 
         <option value="0" selected>All Snippets</option> 
 
         <option value="1">Featured</option> 
 
         <option value="2">Most popular</option> 
 
         <option value="3">Top rated</option> 
 
         <option value="4">Most commented</option> 
 
        </select> 
 
        </div> 
 
        <div class="form-group"> 
 
        <label for="contain">Author</label> 
 
        <input class="form-control" type="text" /> 
 
        </div> 
 
        <div class="form-group"> 
 
        <label for="contain">Contains the words</label> 
 
        <input class="form-control" type="text" /> 
 
        </div> 
 
        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
        </button> 
 
       </div> 
 
       </div> 
 
       <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 
 
       </button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div>

Quelle

2016-08-31 06:05:06 vivekkupadhyay

Drop-Down in Ihrem Snippet sehe ich oben Code kopieren und mit meinem Code ersetzen, aber immer noch nicht funktioniert. – raju

Jetzt habe ich JavaScript-Code von oben nach unten bewegen jetzt funktioniert es gut. Vielen Dank. – raju

@raju froh zu helfen :) – vivekkupadhyay

ich folgendes div mit der id 'someyourContainer' genannt haben.

<div class="dropdown-menu dropdown-menu-right" role="menu" id="someyourContainer">

Das Toggle-Ereignis der Schaltfläche verhalte als Dropdown zwingt den internen Drop-Down auf Klicks zu schließen. Beschränken Sie die close-Ereignis, wenn der interne Dropdown wie geklickt wird unter

<script type="text/javascript"> 
     $('#someyourContainer').click(function (e) { 
      e.stopPropagation(); 
     }); 
    </script>

Quelle

2016-08-31 06:02:47 Vaishali

Wenn ich auf Drop-Down-Menü in Bootstrap klicken öffnet es und dann automatisch schließen

Antwort

Verwandte Themen