«un» переключение div с jQuery

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/

Это работает хорошо, пока я не нажмёте за пределами всплывающего меню, чтобы закрыть его, а затем попытаться нажать на кнопку меню еще раз. Затем требуется двойной щелчок. То, что мне нужно сделать, - это оттолкнуть щелчок на div от функции $ (document) .click. Любая идея о том, как я это сделаю?

Answer 1

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

Это закрывает все всплывающие меню, а не только последний один открыт.

Оставьте все остальное как есть. Не нужно использовать .data() или имя класса.

Fiddle

Answer 2

Проблема с вашим кодом состоит в том, что вам нужно будет дважды щелкнуть, чтобы снова включить функцию toggle. Поэтому, когда вы нажали на документ, вам нужно дважды щелкнуть по заголовку.

Я попытался решить вашу проблему. Вы можете добавить 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>"); 

}); 

Answer 3

Вот реализация очень близко к user1193749 годам, но использует jQuery().data() следить за четный/нечетные клики:

http://jsfiddle.net/5E6VP/