JQuery - reset toggle state

Question

У меня есть кнопка, которая при переключении отображает/скрывает div ('.reportOptions'), это работает отлично.

$('.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 
    } 
); 

тот же DIV можно скрыть, нажав от него, выполнив следующие действия

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

проблема у меня с последней функцией является то, что, если она выполняется, я должен дважды щелкнуть на resuestOptions чтобы снова отобразить div.

Я хочу знать, есть ли способ, с помощью которого вы можете сбросить состояние переключения, не изменяя функцию переключения.

Answer 1

Посмотрите на документацию для метода переключения JQuery в: http://api.jquery.com/toggle/

Вы также можете воспользоваться моментом, чтобы прочитать его дальше, как есть шоу() и скрыть() методы. Вы не должны использовать css ('display', 'none'), чтобы показывать и скрывать элементы, поскольку методы show и hide будут обрабатывать все это для вас, и это гораздо менее запутанно, когда вы читаете свой код.

Я думаю, что вы, возможно, немного задумались над этой ситуацией. Попробуйте вместо этого:

$('.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(); 
}); 

В основном вы связываете функцию щелчка на кнопке, которая показывает DIV и скрывает кнопку и функцию щелчка на документ, который скрывает DIV и показывает кнопку. Щелчки на кнопке и разворот div-stop (это то, чего вы отсутствовали в кнопке раньше), чтобы обработчик щелчка документа не срабатывал при нажатии этих элементов.

Answer 2

Вместо того, чтобы напрямую изменять CSS, добавьте имя класса (и определите его в своем CSS). Затем просто удалите имя класса, чтобы вернуться к нормальному состоянию.