bootstrap-select 在 Bootstrap 下拉菜单中不起作用 [英] bootstrap-select not working inside of Bootstrap dropdown menu

查看：25
本文介绍了bootstrap-select 在 Bootstrap 下拉菜单中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试从 bootstrap-select Library 中放入多选输入Bootstrap 下拉菜单.问题是，当我打开 Bootstrap 下拉菜单并单击多选输入时，下拉菜单关闭，并且似乎无法使用下拉菜单内的输入.

在下拉菜单之外，输入工作正常，但如果下拉菜单打开，它会在我点击多选输入后立即关闭，即使多选输入位于 Bootstrap 下拉菜单之外

我怎样才能让它工作，所以当我点击下拉菜单中的多选输入时，下拉菜单保持打开状态，我可以自由选择多选输入中的任何选项?

这是我的代码(JSFiddle):

<a class="btn dropdown-toggle text-muted btn-block btn-grey py-2 font-weight-bold ";样式=颜色:黑色！重要；字体大小:.8em;"href=#"角色=按钮"id="dropdownMenuLink";数据切换=下拉"aria-haspopup="true";aria-expanded="false";数据显示=静态"><i class="fas fa-slider-h mr-2"</i>菜单</a><div class="dropdown-menu bg-transparent border-0 mt-2";aria-labelledby="dropdownMenuLink";风格=位置:相对；浮动:无；"><表格><div class="input-group mb-3">
<div class="input-group mb-3 multi-select">

</表单>

我已经尝试使用 JQuery 的许多解决方案来解决相关问题，但我无法让它们中的任何一个工作.有人知道我可以做什么吗?

解决方案

您的选择框被打开但菜单被隐藏，因此为了避免这种手动控制打开/关闭菜单的方法.因此，无论何时单击菜单，都可以从 dropdown 以及 dropdown-menu 中添加/删除类 show .

演示代码:

$(document).ready(function() {$('#test-select').selectpicker();$('#test-select2').selectpicker();//点击下拉切换$('#myDD > a.dropdown-toggle').on('click', function(event) {$(this).parent().toggleClass('show')//添加移除类$(this).attr('aria-expanded', $(this).attr('aria-expanded') == 'false' ? 'true' : 'false');//添加真或假$("div[aria-labelledby=" + $(this).attr('id') + "]").toggleClass('show')//添加类/删除});$('body').on('click', function(e) {//检查点击是否发生在`myDD`标签之外如果是..隐藏菜单if (!$('#myDD').is(e.target) &&$('#myDD').has(e.target).length === 0 &&$('.show').has(e.target).length === 0){//删除类并添加属性$('#myDD').removeClass('show')$('#myDD > a').attr('aria-expanded', 'false');$("#myDD").children('div.dropdown-menu').removeClass('show')}});});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5Kkn"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script><div class="dropdown mb-4 text-dark" id="myDD"><a class="btn dropdown-toggle text-muted btn-block btn-grey py-2 font-weight-bold " style="color: black !important; font-size: .8em;"href="#" role="button" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false" data-display="static"><i class="fas fa-sliders-h mr-2"></i>菜单</a><div class="dropdown-menu bg-transparent border-0 mt-2" aria-labelledby="dropdownMenuLink" style="position: relative; float: none;"><表格><div class="input-group mb-3"><label for="inputGroupSelect05" class="text-dark d-block w-100 mb-1">输入文本</label><input type="text" class="form-control form-control-sm" placeholder="文本输入">

<div class="input-group mb-3 多选"><label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">点击会导致下拉菜单关闭</label><select style="color: #495057 !important;"class="w-100" 多个 data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select"><选项>1</选项><option>2</option><选择的选项>3</option><选择的选项>4</option><选择的选项>5</option></选择>

</表单>

<div class="input-group mb-3 多选"><label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">如果打开，点击会导致下拉菜单关闭</label><select style="color: #495057 !important;"class="w-100" 多个 data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select2"><选项>1</选项><option>2</option><选择的选项>3</option><选择的选项>4</option><选择的选项>5</option></选择>

I am trying to put a multiselect input, from bootstrap-select Library inside of a Bootstrap dropdown menu. The problem is that when I have opened the Bootstrap dropdown menu and I click on the multiselect input, the dropdown menu closes, and it seems impossible to use the input inside of the dropdown menu.

Outside of the dropdown menu, the input works fine, but still if the dropdown menu is open, it closes as soon as I click on the multiselect input, even if the multiselect input is placed outside the Bootstrap dropdown menu

How can I make it work, so when I click on the multiselect input inside the dropdown, the dropdown menu stays open, and I can freely choose any of the options inside the multiselect input?

Here is my code (JSFiddle):

<div class="dropdown mb-4 text-dark" id="myDD">
    <a class="btn dropdown-toggle text-muted btn-block btn-grey py-2 font-weight-bold "
       style="color: black !important; font-size: .8em;" href="#" role="button"
       id="dropdownMenuLink"
       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
       data-display="static">
        <i class="fas fa-sliders-h mr-2"></i> Menu
    </a>
    <div class="dropdown-menu bg-transparent border-0 mt-2"
         aria-labelledby="dropdownMenuLink"
         style="position: relative; float: none;">
        <form>
            <div class="input-group mb-3">
                <label for="inputGroupSelect05"
                       class="text-dark d-block w-100 mb-1">Input text</label>
                <input type="text" class="form-control form-control-sm" placeholder="text input">
            </div>

            <div class="input-group mb-3 multi-select ">
                <label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">Click causes close of dropdown</label>
                <select style="color: #495057 !important;" class="w-100" multiple data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select">
                    <option>1</option>
                    <option>2</option>
                    <option selected>3</option>
                    <option selected>4</option>
                    <option selected>5</option>
                </select>
            </div>
        </form>
    </div>
</div>

I have tried using many of the soloutions with JQuery for related problems, but I can't get any of them to work. Any one with an idea on what I could do?

解决方案

Your select-box gets open but the menu gets hide so to avoid this one way would be controlling opening/closing of menu manually . So, whenever menu is clicked add/remove class show from dropdown as well from dropdown-menu .

Demo Code :

$(document).ready(function() {
  $('#test-select').selectpicker();
  $('#test-select2').selectpicker();
//onclick of dropdown toggle 
  $('#myDD > a.dropdown-toggle').on('click', function(event) {
    $(this).parent().toggleClass('show')//addor remove class
    $(this).attr('aria-expanded', $(this).attr('aria-expanded') == 'false' ? 'true' : 'false'); //add true or false
    $("div[aria-labelledby=" + $(this).attr('id') + "]").toggleClass('show') //add class/remove
  });

  $('body').on('click', function(e) {
  //check if the click occur outside `myDD` tag if yes ..hide menu
    if (!$('#myDD').is(e.target) &&
      $('#myDD').has(e.target).length === 0 &&
      $('.show').has(e.target).length === 0
    ) {
     //remove clases and add attr 
      $('#myDD').removeClass('show')
      $('#myDD > a').attr('aria-expanded', 'false');
      $("#myDD").children('div.dropdown-menu').removeClass('show')
    }
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<div class="dropdown mb-4 text-dark" id="myDD">
  <a class="btn dropdown-toggle text-muted btn-block btn-grey py-2 font-weight-bold " style="color: black !important; font-size: .8em;" href="#" role="button" id="dropdownMenuLink" aria-haspopup="true" aria-expanded="false" data-display="static">
    <i class="fas fa-sliders-h mr-2"></i> Menu
  </a>
  <div class="dropdown-menu bg-transparent border-0 mt-2" aria-labelledby="dropdownMenuLink" style="position: relative; float: none;">
    <form>
      <div class="input-group mb-3">
        <label for="inputGroupSelect05" class="text-dark d-block w-100 mb-1">Input text</label>
        <input type="text" class="form-control form-control-sm" placeholder="text input">
      </div>

      <div class="input-group mb-3 multi-select ">
        <label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">Click causes close of dropdown</label>
        <select style="color: #495057 !important;" class="w-100" multiple data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select">
          <option>1</option>
          <option>2</option>
          <option selected>3</option>
          <option selected>4</option>
          <option selected>5</option>
        </select>
      </div>

    </form>

  </div>
</div>

<div class="input-group mb-3 multi-select ">
  <label for="inputGroupSelect02" class="text-dark d-block w-100 mb-1">Click causes close of dropdown if open</label>
  <select style="color: #495057 !important;" class="w-100" multiple data-selected-text-format="count" data-style="custom-select custom-select-sm" id="test-select2">
    <option>1</option>
    <option>2</option>
    <option selected>3</option>
    <option selected>4</option>
    <option selected>5</option>
  </select>
</div>

这篇关于bootstrap-select 在 Bootstrap 下拉菜单中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆