Question

我正在将搜索过滤器呈现为下拉菜单：这是一个下拉菜单-作为引导程序下拉菜单显示-其中带有一些复选框（加标签）。

如果我按下复选框，则一切正常，但是每当我按下复选框的标签时，整个下拉列表在鼠标按下时变为蓝色，而在鼠标按下时消失。单选按钮实际上已被选中，但是我必须重新打开下拉菜单以继续选择我希望选择的其他单选按钮。

代码如下：

cols = ['name1', 'name2', 'name3', ...]
rows = ['condition1', 'condition2', 'condition3', ...]
data = [[data1.1, data1.2, data1.3, ...], [data2.1, data2.2, data2.3, ...], [data3.1, data3.2, data3.3, ...], ...]

在此先感谢您提供任何帮助，如果需要更多信息，请告诉我。

Answer 1

请尝试执行此操作（注意：您可能会找到更好的解决方案。已在Chrome v65中进行了检查）

您需要具有以下JavaScript代码才能使其正常工作。

$('body').on('hide.bs.dropdown', '.dropdownHome', function (e) {
  if(event.target.nodeName == "LABEL")  {
    return false;
  }
});

$('body').on('hide.bs.dropdown', '.dropdownHome', function (e) {
  if(event.target.nodeName == "LABEL")  return false;
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

  <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">&nbsp;</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>

另一种方法

$(document).click(function(e) {
 if($(e.target).closest(".dropdownHome").length === 0 ) {
    $('.dropdown-menu').removeClass('show');
 }
});

$('.dropdownHome').on("hide.bs.dropdown", function() {
    return false;
});

$(document).click(function(e) {
 if($(e.target).closest(".dropdownHome").length === 0 ) {
    $('.dropdown-menu').removeClass('show');
 }
});

$('.dropdownHome').on("hide.bs.dropdown", function() {
    return false;
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

  <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">&nbsp;</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>

Answer 2

整个下拉菜单变成蓝色的原因是，您用dropdown-item包裹了所有内容。当您按下按钮的标签时，您也同时按下了该下拉菜单项。点击事件正在传播并激活其父级下拉项。

如果您查看默认的bootstrap4样式：

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff;
}

这就是为什么您看到该原色背景的原因。

如果您想继续使用下拉菜单来包含所有复选框，则需要停止将click事件传播到父项，并更改下拉项的活动样式。

$(".dropdown-item").click(function(e){
   e.stopPropagation();
})

.dropdown-item:active {
    background-color: #fff;
}

小提琴：http://jsfiddle.net/aq9Laaew/87023/

根据您的应用程序，您可能希望尝试使用modal而不是dropdown作为复选框（顺便说一下，它们不是单选按钮）。

单击单选按钮的标签时，下拉列表消失

2 个答案: