div onclick切换需要两次点击

我有以下一块jquery，它在点击时切换div。我的问题是它首先需要两次点击才能显示div，然后按预期切换div。我究竟做错了什么？感谢您的建议。div onclick切换需要两次点击

<script type="text/javascript"> 
    $(function() { 
     $("#clickme").click(function(e) { 
      e.preventDefault(); 
      var categories = $("#categories"); 
      if (!categories.data("loaded")) { 
       categories.load("/categories"); 
       categories.data("loaded", true); 
      } 
      categories.slideToggle("fast"); 
     }); 
    }); 
    </script>

来源

2013-09-27 user2708058

如果删除if代码块，会发生什么情况？ – j08691

我想最有可能是因为#categories div之前没有隐藏，它没有内容。所以，当你第一次加载它会加载数据，但你立即做一个slideToggle，所以div的状态被切换，它变得隐藏，你不再做一个负载，第二次点击实际上他们再次切换，并使其可见。也使用负载回调，并最初隐藏div。

例：

#categories{ 
    display:none; 
}

和

$(function() { 
     //if you dont want to specify css then do this first up. 
     $("#categories").hide(); 
     //now your click event 
     $("#clickme").click(function(e) { 
      e.preventDefault(); 
      var categories = $("#categories"); 

      if (categories.data("loaded")) { 
       categories.slideToggle("fast"); 
       return; 
      } 

      categories.load("/categories", function(){ 
       categories.data("loaded", true).slideDown("fast"); 
      }); 
     }); 
    });

注意的slideToggle切换的div的当前状态，如果是可见的，没有内容，它仍然隐藏在第一次点击

你的问题在这里很好地演示了Demo-Issue

，你可以修复，通过Demo-Fix

来源

2013-09-27 15:04:25 PSL

完美，显示：无;做到了。非常感谢你！ – user2708058

也许在开始的股利是可见的（没有内容）。第一次单击时，它加载内容但隐藏内容（slideToggle）第二次单击时，内容已加载，其显示内容为slideToggle。

来源

2013-09-27 15:10:15 Pipe

完美，显示：无;做到了。非常感谢你！ – user2708058

我的情况发生了什么，即使隐藏需要第一次切换的div 2点击次数。

<div id="wholeinf1_<?php echo $res['userid']; ?>" style="height:auto; width:auto; display:none;"> 
<div id="wholeinf_<?php echo $res['userid']; ?>" style="height:auto; width:auto;"></div> 
</div> 


<script type="text/javascript"> 
    $('.other_chart').live("click",function(){ 
     //e.preventDefault(); 
     var userid2= $(this).attr("id").split('_').pop(); 
     $.ajax({ 
     type: "POST", 
     async: false, 
     url: "index.php", 
     data: "userid="+ userid2, 
     cache: false, 
     //beforesend: function(){$(".podar").show();}, 
     success: function(html) { 
       //$("#loader_"+userid1).hide(); 
       $("#wholeinf1_"+userid2).toggle(); 
        $("#wholeinf_"+userid2).empty().append(html); 
      } 
     }); 
    }); 
</script>

我做了这是怎么回事，我就把这将触发外部门的数据加载到另一个DIV &股利。这对我来说很顺利。

我想这对未来几年的人会有帮助。

来源

2017-08-05 15:57:35

div onclick切换需要两次点击

回答

相关问题