Div onclick切换需要两次点击

Question

我有下面的jquery，它点击一下div。 我的问题是它首先需要两次点击才能显示div，之后它会按预期切换div。 我究竟做错了什么？ 谢谢你的建议。

    <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>

Answer 1

我想很可能是因为之前没有隐藏#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解决这个问题

Answer 2

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

Answer 3

在我的情况下发生的事情甚至在隐藏了第一次切换所需的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加载到另一个div并切换外部分区。 这对我来说很顺利。

我想这将对未来几年的某些人有所帮助。