javascript - select2 を別の要素から切り替える

Question

行に select2 ドロップダウン (div のみ) があり、その行全体をクリックしてドロップダウンをトリガーできるようにする必要があります。見せるのは問題ないのですが、隠そうとするのが面倒くさくて、私の論理がどこか間違っているのではないかと思っています。select2 AFAIK には、現在のバージョンのトグル メソッドがないため、open メソッドと close メソッドを手動で使用する必要があります。これは私が試したものです。

$('[data-variable-type=select]').on('click', function(e){
  e.stopPropagation();
  var _dropdown = $(this).find('div.interface_dropdown');
  if( _dropdown.hasClass('select2-dropdown-open') ) {
    $(this).find('select.interface_dropdown').select2('close');
  }
  else {
    $(this).find('select.interface_dropdown').select2('open');
  }
});

これにより、正しく開きますが、クリックして閉じると、マウスダウンで閉じますが、マウスアップで再び表示されます。

うまく切り替える方法はありますか？

Answer 1

関連する HTML を投稿しますか？コンテンツを見ないと何をしているのか理解するのは難しいです。

$('[data-variable-type=select]').on('click', function(e){ 
    e.stopPropagation();
    var _dropdown = $(this).find('div.interface_dropdown');
    if( _dropdown.hasClass('select2-dropdown-open') ) {
        _dropdown.removeClass('select2-dropdown-open');
        _dropdown.select2('close');
    } else {
       _dropdown.select2('open');
       _dropdown.addClass('select2-dropdown-open');
   }
});

そのクラスを追加/削除するのを忘れたようですが、これでうまくいくでしょうか? 繰り返しますが、私はあなたのコンテンツを見ることなく、ここで暗闇の中にいるように感じています.

Answer 2

if( _dropdown.hasClass('select2-dropdown-open') ) {
$(this).find('select.interface_dropdown').select2('close');
}

select2 の以降のバージョン (3.3+ iirc) では、select2 を開くとブラウザー全体に透明なマスクが作成され、クリック イベントがリッスンされるため、これは決してトリガーされません。マスクがクリックされると、現在開いている select2 が閉じられます。これは、ユーザーが何か他のことをする準備ができているときに select2 を閉じるための唯一の信頼できる方法でした。

Answer 3

適切な方法は次のとおりです。

$('select').data('select2').toggleDropdown()