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 会停止传播（这就是您之前在按钮中缺少的内容），以便单击这些元素时不会触发文档单击处理程序。