“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/