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

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

Answer 2

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

JQuery - 重置切换状态

2 个答案: