新しい要素が開かれているときに他の要素を隠す/閉じる方法

Question

jQueryでカスタム選択ドロップダウンプラグインを作成する際に問題があります。私は1つの時点で開いている機能です。つまり、ドロップダウンを開くと、他のものが閉じます。
最初のアイデアは、すべてのドロップダウンをオブジェクトとしてグローバル配列を作成することでした。次に、 "opening"関数では、まず最初の行を追加して、どれが開いていても閉じていないことを確認します。

私のスクリプトの非常にスケーリングされたバージョンを作成しました：http://jsfiddle.net/ngGGy/1/
アイデアはその時点で1つのドロップダウンを開いておくことです。意味することは、あなたが1つを開くと、他の人は閉じなければならないということです。そうでなければ、新しい人が開かれたときに自動的に閉じます。

Answer 1

http://jsfiddle.net/pimvdb/ngGGy/3/のようにDropDownSelectサイズリストを記録しておくことができます。

(function($){ 
    var lists = $(); // cache of lists 

    $.fn.DropDownSelect = function (settings) { 
     jQuery.globalEval("var zindex = 100"); 

     var thiselement = $(this); 
     var thislist = thiselement.next('ul'); 
     lists = lists.add(thislist); // add current one to cache 

     thiselement.click(function() { 
      lists.slideUp(); // hide all lists initially 

      if (thislist.is(':visible')) { 
       thislist.slideUp(); 
      } else { 
       thislist.css('z-index', ++zindex).slideDown(); 
      } 
     }); 
    }; 
})(jQuery); 

Answer 2

すべてのプルダウンが登録されているイベントを発生させてみませんか？現在開かれているID（​​またはインスタンス）を渡します。ハンドラでは、ハンドリングインスタンスが開かれているインスタンスかどうかをチェックします。そうでない場合は、閉じます。

Answer 3

あなたのドロップダウンセットは、アコーディオンのように動作するようです。

これは、divで各ドロップダウンをラップしてクラスを作成し、それを使用してドロップダウンリストをすべてターゲティングすると簡単に達成できます。実施例の

I forked your jsfiddle。

（EDIT更新フィドルリンク）

Answer 4

あなたは正しい軌道に間違いだが、あなたが一度にオープン1つのドロップダウンリストを持っているつもりなら、あなたは彼らが何らかの形で関係しているとします。幸いなことに、あなたのマークアップはすでにそこにあるので、私たちがしなければならないことは、JSを修正することだけです。私はあなたのjsFiddleプロジェクトをここで更新しました：http://jsfiddle.net/ninjascript/ngGGy/4/

最初にセレクタ。 jQueryのは、あなたがこのような^=を使用して、類似した属性を選択できます：

$('div[id^=button]').DropDownSelect(); 

今、私たちは自分のプラグインビットを更新する必要があります。 「thislist」であったものが現在「everylist」と呼ばれていることに注目してください。これで、クリックされたボタンに関連付けられたリストを開く前に、すべてのリストがクリックで閉じるように強制できます。

(function($){    
    $.fn.DropDownSelect = function (settings) { 
     jQuery.globalEval("var zindex = 100"); 

     var thiselement = $(this); 
     var everylist = thiselement.next('ul'); 

     thiselement.click(function() { 
      var thislist = $(this).next('ul'); 
      if (everylist.is(':visible')) { 
       everylist.slideUp(); 
      } 
      thislist.css('z-index', ++zindex).slideDown(); 
     }); 
    }; 
})(jQuery); 

幸運！