JQuery - 重置切换状态答案

【问题标题】：JQuery - reset toggle stateJQuery - 重置切换状态
【发布时间】：2012-03-27 04:52:16
【问题描述】：

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

我想知道的是，是否有任何方法可以在不更改切换功能的情况下重置切换状态。

【问题讨论】：

标签： jquery click toggle

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

【讨论】：

这行不通，我想你可能已经理解了我的问题，但还是感谢您的尝试
诚然，要理解您在代码和描述之间尝试做什么有点困难。您能否更具体地说明“这行不通”？如果我不知道您要做什么或什么不起作用，我将无法很好地帮助您：P
那么你写的第二个函数有一个矛盾，你显示然后隐藏 .reportOptions div，我基本上想要做的是让切换函数知道 .reportOptions div 已经关闭，因为在最后一个功能不这样做的那一刻，这意味着我必须在执行最后一个功能后双击切换按钮。
无论如何我只是想知道是否有一种方法可以在不将切换功能更改为单击的情况下执行我想要的操作，如果没有，那我想我可以忍受。
嗯，您希望实现 2 个功能。 1）当您单击按钮时，div 显示并且按钮隐藏。 2）当显示div并单击页面时，div隐藏并且按钮显示。所以我正在做的就是这样。唯一缺少的链接是您需要在按钮和 div 点击时 stopPropagation() 。您只在 div 上执行此操作，而不是在按钮上执行此操作。因此，当您单击按钮时实际发生的情况是按钮显示 div，然后单击事件传播到再次隐藏 div 的文档。

【解决方案2】：

不要直接更改 CSS，而是添加一个类名（并在您的 CSS 中定义它）。然后只需删除类名即可恢复正常。

【讨论】：