javascript - 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 来解决这个问题