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次才能激活幻灯片并显示数据。为什么会这样？每个链接只需要执行一次此操作。因此，当我第一次查看页面并点击“更多”类的链接时，我需要单击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);
            })
        });

很好地工作，没有跳动的感觉。

需要单击Jquery SlideToggle 2次

2 个答案: