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 来隐藏该 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();
});

基本上，您将单击函数绑定(bind)到显示 div 并隐藏按钮的按钮，并将单击函数绑定(bind)到隐藏 div 并显示按钮的文档。单击按钮和 div 会停止传播(这就是您之前在按钮中缺少的内容)，以便单击这些元素时不会触发文档单击处理程序。