2012-04-02 26 views
0

jQueryの.toggleメソッドを使用して、divがクリックされたときに開閉するメニューを作成しています。ここに私のコードは次のとおりです。"un" jQueryでdivを切り替える

$(".header").toggle(function() { 
     $(this).find(".parent").fadeIn("fast"); 
     $(this).css("background-color","red");   
    }, function() { 
     $(this).find(".parent").fadeOut("fast"); 
     $(this).css("background-color","white");  
}); 

$(document).click(function() { 
     $('.parent').fadeOut("fast"); 
    $(".header").css("background-color","white"); 

}); 

$(".parent").click(function(event){ 
    event.stopPropagation(); 
}); 

http://jsfiddle.net/bmcmahen/X9S5C/8/

私はそれを閉じて、再度メニューボタンをクリックしようとすると、ポップアップメニューの外側をクリックするまで、これはうまく動作します。その後、ダブルクリックする必要があります。私ができる必要があるのは、$(document).click関数からのdivのクリックを解消することです。どのように私はこれをやろうと思っていますか?

+1

私は、一般的に私は1つを使用する代わりに、トグルを使用しない「クリック」リスナーと '.is( ':hidden')を使って 'div in questions'の現在の状態に頼ってください。 – anson

+0

私は同様のことをやろうと考えていました。 – bento

答えて

0
$(document).on('click', function() { 
    $(".header .parent").not(':hidden').closest('.header').click(); 
}); 

これだけではなく、最新の1が開かれ、ALLのポップアップメニューを閉じます。

そのまま残ります。 .data()またはclassNameを使用する必要はありません。ここで

Fiddle

+0

ああ..これはもっと簡単なようです。ありがとう。そして、はい、それは開いているdivのすべてを閉じます。これを英語に翻訳するには:ドキュメントをクリックすると、非表示ではないクラス.parentを持つすべての要素が検索され、次の先行する.headerクラスが検索され、クリックされます。トグルオプションを起動してリセットします。あれは正しいですか? – bento

+0

はい、そうです! –

0

コードに問題がある場合は、もう一度toggle機能を続行するには、2回クリックする必要があります。したがって、文書をクリックすると、ヘッダーを2回クリックする必要があります。

私はあなたの問題を解決しようとしました。クリックしたときにActiveクラスを追加し、文書をクリックするとtriggeractive headerをクリックできます。 demo here

このコードで置き換えれば正常に動作します。

$(".header").toggle(function() { 
    $(this).addClass('Active').siblings().removeClass('Active'); 
    $(this).find(".parent").fadeIn("fast"); 
$(this).css("background-color","red");   
}, function() { 
    $(this).find(".parent").fadeOut("fast"); 
$(this).css("background-color","white");  
}); 

$(document).click(function() { 
     //$('.parent').fadeOut("fast"); 
    //$(".header").css("background-color","white"); 
    $(".header.Active").trigger('click'); 

}); 

$(".parent").click(function(event){ 
    event.stopPropagation(); 
}); 

$("#search").keyup(function(){ 
var query = $("#search").val(); 
    $("#results").append(query+"<br>"); 

}); 

+0

これはそれでした。ニース。また、クラスを兄弟から削除し、より堅牢にします。ありがとう! – bento

+0

しかし、ドキュメントがクリックされたときに2つ以上のポップアップメニューが表示される場合はどうなりますか?確かにそれらをすべて隠しておきたい。私の答えを見てください。 –

0

user1193749年代に非常に近い実装ですが、偶数/奇数回のクリックを追跡するためにjQuery().data()を使用しています。

http://jsfiddle.net/5E6VP/

関連する問題