JQuery之重置切换状态

我有一个按钮，切换时会显示/隐藏 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。

我想知道是否有任何方法可以重置切换状态而无需更改切换功能。

请您参考如下方法:

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