JQuery - сбросить состояние переключения

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/

Вы также можете потратить немного времени, чтобы прочитать его дальше, так как есть методы show () и hide (). Вы не должны использовать 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 прекращают (это то, чего вам не хватало в кнопке ранее), чтобы обработчик щелчков по документу не срабатывал при щелчке по этим элементам.

Answer 2

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