jquery - 如何使用用于jQuery的Bootstrap Multiselect插件更改下拉菜单的宽度？

我正在使用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/