JQuery - reset stanu przełączania

Question

Mam przycisk, który po włączeniu wyświetla/ukrywa div (".reportOptions"), działa to doskonale.

$('.reportOptions').click(function(e){ 
    e.stopPropagation(); 
}); 


$('.requestOptions').toggle(
    function(){ 
     $(this).parent().find('.reportOptions').css('display','block'); //show request options 
    },function(){ 
     $('.reportOptions').css('display','none'); //hide all request oprtions menus 
    } 
); 

samo div można również ukryte poprzez kliknięcie z dala od niego, wykonując następujące czynności

$(document).click(function(){ 
    $('.reportOptions').css('display','none'); 
    $('.requestOptions').toggle(even); 
}); 

problem mam z ostatniej funkcji jest to, że jeśli jest ona wykonywana muszę kliknij dwukrotnie resuestOptions w celu ponownego wyświetlenia div.

Chcę wiedzieć, czy istnieje sposób, w jaki można zresetować stan przełączania, bez konieczności zmiany funkcji przełączania.

Answer 1

Spójrz na dokumentacji dla metody przełączania jQuery: http://api.jquery.com/toggle/

Można też poświęcić chwilę na zapoznanie się z nim dalej, ponieważ istnieją show() i Hide() metody. Nie powinieneś używać css ("display", "none") do pokazywania i ukrywania elementów, ponieważ metody show and hide zajmą się tym wszystkim dla ciebie i jest znacznie mniej mylące, gdy czytasz swój kod.

Wydaje mi się, że nieco przesadziłeś z tą sytuacją. Spróbuj to zamiast:

$('.reportOptions').click(function(e){ 
    e.stopPropagation(); 
}); 


$('.requestOptions').click(
    function(e){ 
     $(this).parent().find('.reportOptions').show(); //show request options 
     $('.requestOptions').hide(); //hide all request oprtions menus 
     e.stopPropagation(); 
    } 
); 


$(document).click(function(){ 
    $('.reportOptions').hide(); 
    $('.requestOptions').show(); 
}); 

Zasadniczo masz wiążące funkcji kliknięcia przycisku, który pokazuje div i ukrywa przycisk i funkcję kliknij, aby dokument, który ukrywa div i przedstawiono przycisk. Kliknięcia przycisku i propagacja div-stop (czego wcześniej brakowało w przycisku), aby obsługa kliknięcia dokumentu nie uruchamiała się po kliknięciu tych elementów.

Answer 2

Zamiast bezpośrednio zmieniać CSS, dodaj nazwę klasy (i zdefiniuj ją w swoim CSS). Następnie usuń nazwę klasy, aby przywrócić normalne działanie.