Jquery SlideToggle需要点击2次

Question

我正在使用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次幻灯片才能激活和显示数据。为什么会发生这种情况？它只需要在每个链接中这样做一次。因此，当我第一次查看一个页面时，我点击了一个带有"more“类的链接，我需要点击2次( $.post被执行2次:-/ )才能使切换生效。之后，它将按其应有的方式工作，1次单击向下切换，1次单击向上切换。

Answer 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上的示例。

Answer 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);
            })
        });

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