bootstrap-select 在 Bootstrap 下拉菜单中不起作用 [英] bootstrap-select not working inside of Bootstrap dropdown menu
问题描述
我正在尝试从 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></选择>
</表单>