Javascript Div onclick切换需要两次单击

我有下面一段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>

$（函数（）{
$（“#单击我”）。单击（函数（e）{
e、 预防默认值（）；
风险值类别=$（“#类别”）；
如果（！categories.data（“已加载”））{
类别。负载（“/类别”）；
类别。数据（“已加载”，真实）；
}
类别。滑动切换（“快速”）；
});
});

我认为最有可能的原因是

#categories

div以前没有隐藏，而且里面没有内容。因此，当您第一次加载时，它将加载数据，但您会立即进行滑动切换，以使div的状态变为“切换”，它将变为“隐藏”，您不再进行加载，第二次单击时，它们将再次切换并使其可见。还可以在加载时使用回调，并在开始时隐藏div

例：

及

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

您的问题在这里得到了很好的证明

---

您可以通过

解决这个问题，可能在开始时div是可见的（没有内容）。 第一次单击时，它加载内容但隐藏内容（滑动切换）

---

在第二次单击时，内容已经加载并通过slideToggle显示。

在我的情况下，即使在隐藏了第一次切换所需的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>

---

如果删除if代码块会发生什么？完美，显示：无；成功了。非常感谢你！完美，显示：无；成功了。非常感谢你！
$(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");
           });
        });
    });

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