Integrieren Sie zwei Schaltflächen Drop-Down-Toggle öffnen

Question

Ich versuche, zwei Schaltflächen in einen zu integrieren. Wenn Sie auf die kleine V-Schaltfläche klicken, wird das Dropdown-Menü geöffnet. Aber das möchte ich auch, wenn du auf den Button mit dem Titel klickst. Grundsätzlich sollten die beiden Buttons (V-Icon und Titel) eins sein. Ist das möglich?

.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:blue; 
 
\t color:#FFF; 
 
} 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:red; 
 
\t color:#FFF; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.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 class="btn-group"> 
 
      <button class="btn btn-primary" type="button">Car brand</button> <button class="btn btn-primary dropdown-toggle" 
 
      data-toggle="dropdown" type="button"><span class= 
 
      "caret"></span></button> 
 
      <div class="dropdown-menu car-brand"> 
 
       <div class="typeahead-box"> 
 
        <input class="car brand" placeholder= 
 
        "Car brand" type="text"> 
 
       </div> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <ul> 
 
          <li>mercedes</li> 
 
          <li>audi</li> 
 
          <li>volvo</li> 
 
          <li>renault</li> 
 
          </ul> 
 
         
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class= 
 
          "btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>

Answer 1

Probieren Sie diese

<button class="btn btn-primary" data-toggle="dropdown" type="button">Car brand</button> 

Statt

<button class="btn btn-primary" type="button">Car brand</button> 

.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:blue; 
 
\t color:#FFF; 
 
} 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:red; 
 
\t color:#FFF; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.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 class="btn-group"> 
 
      <button class="btn btn-primary" data-toggle="dropdown" type="button">Car brand</button> <button class="btn btn-primary dropdown-toggle" 
 
      data-toggle="dropdown" type="button"><span class= 
 
      "caret"></span></button> 
 
      <div class="dropdown-menu car-brand"> 
 
       <div class="typeahead-box"> 
 
        <input class="car brand" placeholder= 
 
        "Car brand" type="text"> 
 
       </div> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <ul> 
 
          <li>mercedes</li> 
 
          <li>audi</li> 
 
          <li>volvo</li> 
 
          <li>renault</li> 
 
          </ul> 
 
         
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class= 
 
          "btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>

Answer 2

Einfach die data-toggle="dropdown" den "Car Brands" hinzufügen, so wie Sie es im Carat-Element haben.

Wie so:

.btn_clear { 
 
    float: right; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 29px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:blue; 
 
\t color:#FFF; 
 
} 
 
    
 
.btn_apply { 
 
    float: left; 
 
\t display: inline-block; 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t padding: 10px 17px; 
 
\t text-align: center; 
 
\t font-size:10px; 
 
\t background-color:red; 
 
\t color:#FFF; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.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 class="btn-group"> 
 
      <button class="btn btn-primary" data-toggle="dropdown" type="button">Car brand</button> <button class="btn btn-primary dropdown-toggle" 
 
      data-toggle="dropdown" type="button"><span class= 
 
      "caret"></span></button> 
 
      <div class="dropdown-menu car-brand"> 
 
       <div class="typeahead-box"> 
 
        <input class="car brand" placeholder= 
 
        "Car brand" type="text"> 
 
       </div> 
 
       <div style="position: relative;"> 
 
        <div class=" scrollable-menu" style="margin-bottom: 70px;"> 
 
         <ul> 
 
          <li>mercedes</li> 
 
          <li>audi</li> 
 
          <li>volvo</li> 
 
          <li>renault</li> 
 
          </ul> 
 
         
 
         <div class="div_form"> 
 
          <span class="btn_apply">Apply</span> <span class= 
 
          "btn_clear">Clear</span> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div>