集成两个按钮下拉切换打开

Question

我想将两个按钮集成到一个。所以当你点击小V图标按钮时，下拉菜单打开。但我希望在单击带有标题的按钮时也可以这样做。基本上两个按钮（V-图标和标题）应该是一个。那可能吗？

.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

只需将“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>