「un」使用jQuery切換div

Question

我正在使用jQuery的.toggle方法來創建菜單，該菜單在單擊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的點擊。有關我如何做這件事的任何想法？

Answer 1

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

這將關閉所有彈出式菜單，而不僅僅是最新的一個打開。

讓所有事情都保持原樣。無需使用.data()或className。

Fiddle

Answer 2

您的代碼存在的問題是，您需要單擊兩次以使toggle函數再次繼續。所以當你點擊文檔時，你需要在標題上點擊兩次。

我試圖解決你的問題。你可以添加Active類，無論你點擊了什麼，當你點擊文檔trigger時active 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>"); 

}); 

Answer 3

這是一個實現非常接近user1193749的，但使用jQuery().data()保持偶/奇點擊跟蹤：

http://jsfiddle.net/5E6VP/