【发布时间】：2018-07-12 10:06:43
【问题描述】：
我正在制作一个呈现为下拉菜单的搜索过滤器：它是一个下拉菜单 - 以引导下拉菜单的形式呈现 - 里面有一些复选框（加上标签）。
如果我按下复选框，一切正常，但每当我按下复选框的标签时，整个下拉菜单会在鼠标按下时变为蓝色，并在鼠标升起时消失。单选按钮实际上已被选中，但我必须重新打开下拉菜单才能继续选择我希望选择的其他单选按钮。
代码如下：
<!DOCTYPE html>
<html>
<body>
<section id="homeSearchSection" class="search homeSearch">
<div id="homeSearchDiv" class="container text-center">
<div id="homeSearchDiv" class="form-holder">
<h2>Onde comer?</h2>
<p class="lead">Use o nome do estabelecimento ou a sua localização.</p>
<form id="homeSearch" action="#" method="post">
<div class="form-group row" id="formGroupHome">
<div class="col-lg-9 col-md-12">
<input class="searchInput" type="text" name="search" id="search" placeholder="Procure aqui...">
<button type="submit" class="btn btn-primary btn-gradient submit homeSearchSubmit"><span style="font-size: 24px;" class="icon-loupe"></span></button>
</div>
<div class="col-3 dropup dropdownHome">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">Pesquisa avançada</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-item">
<div class="row">
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Gastronomia:</h6>
<label class="dropdown-item"><input type="checkbox"> Italiana</label>
<label class="dropdown-item"><input type="checkbox"> Chinesa</label>
<label class="dropdown-item"><input type="checkbox"> Portuguesa</label>
<label class="dropdown-item"><input type="checkbox"> Mexicana</label>
<label class="dropdown-item"><input type="checkbox"> Brasileira</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Regime alimentar:</h6>
<label class="dropdown-item"><input type="checkbox"> Vegetariano</label>
<label class="dropdown-item"><input type="checkbox"> Vegan</label>
<label class="dropdown-item"><input type="checkbox"> Macrobiótico</label>
</div>
<div class="col">
<h6 class="dropdown-header">Tipo de comida:</h6>
<label class="dropdown-item"><input type="checkbox"> Carne</label>
<label class="dropdown-item"><input type="checkbox"> Peixe</label>
<label class="dropdown-item"><input type="checkbox"> Kebab</label>
<label class="dropdown-item"><input type="checkbox"> Picanha</label>
<label class="dropdown-item"><input type="checkbox"> Marisco</label>
<label class="dropdown-item"><input type="checkbox"> Hambúrguer</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header"> </h6>
<label class="dropdown-item"><input type="checkbox"> Pizza</label>
<label class="dropdown-item"><input type="checkbox"> Francesinha</label>
<label class="dropdown-item"><input type="checkbox"> Sandes</label>
</div>
<div class="col" style="border-right: solid #0084FF 1px;">
<h6 class="dropdown-header">Tipo de refeição:</h6>
<label class="dropdown-item"><input type="checkbox"> Gourmet</label>
<label class="dropdown-item"><input type="checkbox"> Self-service</label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
</body>
</html>
提前感谢您的任何帮助，如果您需要更多信息，请告诉我。
【问题讨论】：
标签： php html twitter-bootstrap bootstrap-4