Jquery SlideToggle 需要点击 2 次答案

【问题标题】：Jquery SlideToggle needs to be clicked 2 timesJquery SlideToggle 需要点击 2 次
【发布时间】：2011-03-01 04:39:35
【问题描述】：

我正在使用 slideToggle 在 div 中显示一些数据。这是我的代码：

$('a.more').click(function(event){
            event.preventDefault();            
            var id = $(this).attr('cid');
            $.post('<?php echo $this->baseUrl('/teacher/class-members');?>',
            {cid: id},
            function(data) {                              
                $("div[cid='" + id + "']").slideToggle(500, function(){
                    $(this).html(data);
                });
            })
        });

问题是我需要单击 2 次才能激活幻灯片并显示数据。为什么会这样？每个链接只需要这样做一次。因此，当我第一次查看页面并单击“更多”类的链接时，我需要单击 2 次（ $.post 执行 2 次 :-/ ）才能使切换起作用。之后它将正常工作，1单击向下切换，1单击向上切换。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

div[cid= 的初始 css 状态是什么，如果设置为显示块，它将隐藏 div，然后在回调中分配 html。

如果您将 div 设置为display:none，它应该第一次可以工作，但它会很跳跃，因为它只会在slideToggle 的回调上设置 html。

如果您想在每次点击时向上滑动并加载数据，试试这个：

$('a.more').click(function (event) {
    event.preventDefault();
    var id = $(this).attr('cid');
    var $div = $("div[cid='" + id + "']").slideUp(function(){$(this).empty();});
    $.post('<?php echo $this->baseUrl(' / teacher / class - members ');?>', {
        cid: id
    }, function (data) {
        $div.html(data).slideDown(500);
    })
});

jsfiddle 上的示例。

【讨论】：

div 是空的，没有附加任何状态....嗯，也许这就是原因。我应该设置一个显示：可能没有吧？完成这项工作的最佳方法是什么？
如果它没有内容，它仍然被认为是可见的，并将通过第一次调用 slideToggle 设置为 display:none
好的，谢谢。我设置属性：显示：无。有点晕，你知道怎么解决吗？
查看我的更新，因为您正在动态加载数据，因此单独拆分幻灯片切换可能会更好。一旦数据被追加，slideUp on click，slideDown。
没有像我预期的那样工作:)) 现在它可以在 1 次点击中上下滑动。我会坚持切换的跳动感 :) 或者只是隐藏/显示。

【解决方案2】：

$('a.more').click(function(event){
            event.preventDefault();            
            var id = $(this).attr('cid');
            $.post('<?php echo $this->baseUrl('/teacher/class-members');?>',
            {cid: id},
            function(data) {                              
                $("div[cid='" + id + "']").html(data).slideToggle(500);
            })
        });

像这样工作得很好，没有跳动的感觉。

【讨论】：