这是我在 previous question 之后遇到的扩展问题.
问题在于，当有人单击箭头以显示高级搜索时，它会按预期下拉表单。然而，当有人点击选择下拉菜单时，整个下拉菜单会自行折叠。
我一直在尝试找出是什么元素/触发器导致了这个问题，看看是否有办法解决这个问题，但我一点进展都没有
这是我目前观察到的情况
- [预期] 如果用户在下拉菜单区域外单击，菜单会折叠
- [意外] 如果用户点击下拉菜单中的任何空格，菜单仍然折叠
- [预期] 如果用户单击文本字段、复选框、单选框、文本区域，他们应该能够键入和输入所需的文本。
- [意外] 如果用户点击选择菜单，下拉菜单会立即折叠
我在下面放了一个示例代码来演示我的问题。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<div class="input-group-append">
<div class="btn-group">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right p-3 w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
<div class="form-group">
<label for="option">Option Header</label>
<select class="form-control" id="option" name="option">
<option>Pick an option</option>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
</select>
</div>
<div class="form-group">
<label for="inputtext">Input Header</label>
<input type="text" class="form-control" id="inputtext" name="inputtext">
</div>
<div class="form-group">
<label for="inputcb">Checkbox Header</label>
<input type="checkbox" class="form-control" id="inputcb" name="inputcb">
</div>
<div class="form-group">
<label for="inputradio">Radio Header</label>
<input type="radio" class="form-control" id="inputradio" name="inputradio">
</div>
<div class="form-group">
<label for="ta">TextArea Header</label>
<textarea class="form-control" id="ta" name="ta"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>最佳答案
Bootstrap 下拉菜单将始终在单击时关闭，除了 <form> 时用来。防止它在点击时关闭的方法是使用 <form>下拉列表中的元素...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<div class="container">
<div class="row">
<div class="col-12">
<div class="input-group dropdown">
<input type="text" class="form-control" id="project_search" placeholder="search ...">
<div class="input-group-append">
<div class="btn-group">
<button class="btn bg-primary text-white" type="button">Search</button>
<button class="btn bg-primary text-white dropdown-toggle dropdown-toggle-split" id="searchAdvancedFilter" data-toggle="dropdown" data-boundary="window" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu dropdown-menu-right p-3 w-100" aria-labelledby="searchAdvancedFilter">
<h6 class="dropdown-header">Advanced Settings</h6>
<div class="dropdown-divider"></div>
<form>
<div class="form-group">
<label for="option">Option Header</label>
<select class="form-control" id="option" name="option">
<option>Pick an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
<div class="form-group">
<label for="inputtext">Input Header</label>
<input type="text" class="form-control" id="inputtext" name="inputtext">
</div>
<div class="form-group">
<label for="inputcb">Checkbox Header</label>
<input type="checkbox" class="form-control" id="inputcb" name="inputcb">
</div>
<div class="form-group">
<label for="inputradio">Radio Header</label>
<input type="radio" class="form-control" id="inputradio" name="inputradio">
</div>
<div class="form-group">
<label for="ta">TextArea Header</label>
<textarea class="form-control" id="ta" name="ta"></textarea>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>https://www.codeply.com/go/18ACVL2uzn
另一种选择是使用 jQuery stopPropagation()方法:https://www.codeply.com/go/4dVvDDpChW
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
关于javascript - 单击选择元素时 Bootstrap4 下拉菜单自动折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49811552/