我正在使用David Sutz的 bootstrap multiselect,但是找不到在.dropdown-menu
上修改onDropdownShow
的方法。在以下功能中设置宽度无效:
$('#flavor').multiselect({
onDropdownShow: function(event) {
$(this).closest('.dropdown-menu').css('width','500px')
}
});
问题在于
$(this)
,它似乎不是DOM节点,尽管我希望它是#flavor
。我想做的是根据窗口的宽度动态更改菜单的宽度(基本上是使其响应),因此每次打开菜单时都需要执行代码。另外,我在页面上有多个multiselect框,因此它确实需要是一个通用函数,而没有硬编码的DOM引用,因此需要
$(this)
才能正常工作。 最佳答案
您可以使用event
找出单击了哪个按钮。在这里,您可以使用简单的jQuery遍历来查找和编辑下拉菜单。
要基于打开哪个下拉列表而具有不同的行为,可以将原始选择的id
定位为目标。然后可能使用另一个函数返回所需的任何更改。
$(document).ready(function() {
$('.dropdowns').multiselect({
onDropdownShow: function(event) {
var menu = $(event.currentTarget).find(".dropdown-menu");
var original = $(event.currentTarget).prev("select").attr("id");
// Custom functions here based on original select id
if (original === "flavour") menu.css("width", 500);
if (original === "flavour2") menu.css("background", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<select id="flavour" class="dropdowns" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<select id="flavour2" class="dropdowns" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
我找不到托管该插件的CSS的CDN,因此样式看起来会有所不同,但是上面的JS代码有效。
关于jquery - 如何使用用于jQuery的Bootstrap Multiselect插件更改下拉菜单的宽度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31283979/