1

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

3 回答 3

3

我认为很可能是因为#categoriesdiv 之前没有隐藏并且它没有内容。因此，当您第一次加载时，它会加载数据，但您会立即执行 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-27T15:04:25.263 回答
0

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

于 2013-09-27T15:10:15.397 回答
0

在我的情况下发生的事情是即使在隐藏第一次切换所需的 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 并切换外部分区。这对我来说很顺利。

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

于 2017-08-05T15:57:35.093 回答