2012-03-01 11 views
0

同じマークアップを持つ2つのカスタムドロップダウンリストがあります。私は一度に1つだけのショーを持っている必要があります。今、私は同時に両方を開くことができます。リストをクリックすると、両方とも閉じる必要があります。jqueryを使用して同じマークアップを持つ要素を非表示にするにはどうすればよいですか?

両方のリストで同じマークアップが必要なので、これを実現するために一意のIDまたは追加のクラスを使用することはできません。ここで

は私のバイオリンの例へのリンクです:http://jsfiddle.net/dg7Lc/29/

すべてのヘルプは大、おかげでいただければ幸いです!

-D

答えて

0

jqueryで「アクティブ」などのデータ属性をクリックすると、それらの属性の1つをクリックして、その属性を持つものをすべて非表示にすることを検討してください。

0

$('.custom-select').eq(0).hide()最初のものを非表示になります。

.hide()の代わりにを使用して(明らかに)インデックスを(1)に変更して2番目の値を取得します。

+0

私はOPは#2を開くと、#1を閉じますが、信じています。 – pimvdb

+0

はい、JSになじみがないかぎり、残りの部分を把握できるはずです。 –

0

最初に考えられるのは、スパンまたはdivを一方または両方にラップし、それを使用して「同じマークアップ」制限を回避できる場合です。それ以外は、しかし、私は、ページの順序を使用してお勧めしたい - それらの間を取得するために).next()と.prevを(使用、および選択する

$("div.custom-select").get(0) 

または

$("div.custom-select").get(1) 

のようなもの外部からのそれら。

編集:onmouseover、onchangeなどのようなものを実行することができれば、それはさらに簡単です。変更しているものが「this」パラメータとして関数に渡されます。両方を非表示にしてこれを表示するか、または両方を表示して非表示にしてください。

edit2:同様に、いったんそれらのうちの1つが適切に隠されると、それは隠され、 ":hidden"セレクタに応答します。あなたが何か

0

を示すか、隠して行く前に、それらを区別(とjQuery変数として区別を保存)することを使用最初を隠す:

$('.custom-select').first().hide(); 

は、第二の非表示:

$('.custom-select').last().hide(); 

そして、必要なところにこれらのコード行を入れてください。

0

http://jsfiddle.net/dg7Lc/31/

基本的には、他の人クローズ:

$('.custom-select').not(this).find('ul').slideUp('fast'); 

そして、ボックスの外側をクリックしたときに閉じるために、私は、コードのこの部分を使用しますが、それは少し汚いです:

$("body").click(function(e) { 
    var should = true; 
    for($e = $(e.target); should && $e.length; $e = $e.parent()) { 
     should = !$e.is(".custom-select"); 
    } 
    if(should) { 
     $('.custom-select').find('ul').slideUp('fast'); 
    } 
}); 
0

ドキュメントにクリックをバインドすると、カスタムセレクトやその外のドキュメントをクリックしたかどうかを調べ、必要に応じて開いているリストを非表示にすることができます。

$(document).click(function(ev){ 
    if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); } 
}); 

Updated JSFiddle

関連する問題