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

Question

我正在尝试将两个按钮合二为一。因此，当您单击小 V 图标按钮时，下拉菜单将打开。但我希望当您单击带有标题的按钮时也会发生这种情况。基本上两个按钮(V-icon 和标题)应该是一个。这可能吗？

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