13

David Sutz のブートストラップmultiselect.dropdown-menuを使用していますが、 onを変更する方法が見つかりませんonDropdownShow。以下の関数で幅を設定しても機能しません。

$('#flavor').multiselect({
    onDropdownShow: function(event) {
        $(this).closest('.dropdown-menu').css('width','500px')
    }
});

問題は$(this)、DOM ノードではないように思われる にありますが、#flavor.

私がやろうとしているのは、ウィンドウの幅に応じてメニューの幅を動的に変更することです (基本的にはレスポンシブにします)。そのため、メニューが開かれるたびにコードを実行する必要があります。さらに、ページに複数の複数選択ボックスがあるため、DOM 参照をハードコードせずに汎用関数にする必要があるため$(this)、動作する必要があります。

4

2 に答える 2

8

を使用して、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 コードは機能します。

于 2015-07-10T05:20:50.967 に答える
-2

closest() の使用方法を変更する必要があると思います。クラス名の代わりにタグ要素を使用してみてください。

$('#flavor').multiselect({
    onDropdownShow: function(event) {
        $(this).closest('select').css('width','500px')
    }
});

これを試して、うまくいかない場合はお知らせください。

于 2015-07-09T00:18:19.387 に答える