2つのボタンを統合するドロップダウンを開く

Question

2つのボタンを1つに統合しようとしています。小さなVアイコンボタンをクリックすると、ドロップダウンメニューが開きます。しかし、私はあなたがタイトルのボタンをクリックしたときにも起こるようにしたいと思います。基本的に2つのボタン（Vアイコンとタイトル）は1つにする必要があります。それは可能ですか？

.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

この

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

代わりの

<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

「Car Brands」には、carat要素と同じようにdata-toggle="dropdown"を単に追加します。そのよう

：

.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>