Question

点击 ul 列表中的任何 li 项目后，所有项目显示/隐藏除了点击的项目。我尝试使用 slideToggle 做好动画。但是，如果反复单击相同的项目列表，请更改列表的顺序。

HTML：

<ul class="imp">
    <li style="background: hotpink;">1</li>
    <li style="background: lightgreen;">2</li>
    <li style="background: lightblue;">3</li>
    <li style="background: bisque;">4</li>
    <li style="background: pink;">5</li>
    <li style="background: wheat;">6</li>
</ul>

的jQuery

$('li').click(function () {
    if ($(this).closest('ul').find('li').is(':hidden')) {
        $(this).prependTo(".imp").fadeIn("slow");
    } 
    $(this).closest('ul').find('li').not($(this)).slideToggle("slow", function () {
        if ($(this).closest('ul').find('li').is(':hidden')) {
            $(this).prependTo(".imp");
        }
    });
});

CSS

ul{
    list-style: none;
}
li {
    cursor: pointer;
    width: 100px;
    background-color: red;
    text-align: center;
    height: 25px;
}

Answer 1

为什么使用prependTo方法？

它改变了DOM，这就是它发生的原因..

如果您删除了两条prependTo行，它将按您的意愿运行..

演示 http://jsfiddle.net/rJHFW/1/

您可以将所有代码简化为

$('li').click(function () {
    $(this).siblings().slideToggle('slow');
});

演示 http://jsfiddle.net/rJHFW/2/

更新（评论后）

动画完成后，您可以执行前置任务

这是一些代码（在中引入了一些检查）

$('li').click(function () {
    var self = $(this),
        siblings = self.siblings(),
        count = siblings.length,
        show = siblings.is(':hidden'),
        inprogress = siblings.is(':animated');

    // early break if an animation is still in progress
    if (inprogress) return;


    // slidetoggle 
    // and change position only after the animation is complete
    siblings.slideToggle('slow', function(){
        count--;
        if( count === 0 && !show){
            self.prependTo('.imp');
        }
    });
});

演示 http://jsfiddle.net/rJHFW/4/

Answer 2

两个想法：

尝试使用$().stop()：http://jsfiddle.net/bPTZM/1/

$('li').click(function () {
    if ($(this).closest('ul').find('li').is(':hidden')) {
        $(this).prependTo(".imp").stop().fadeIn("slow");
    } 
    $(this).closest('ul').find('li').not($(this)).stop().slideToggle("slow", function () {
        if ($(this).closest('ul').find('li').is(':hidden')) {
            $(this).prependTo(".imp");
        }
    });
});

或者，您也可以在动画运行时阻止点击：http://jsfiddle.net/bPTZM/2/

var animating = false;
$('li').click(function () {
    if(animating) return;
    else animating = true;

    if ($(this).closest('ul').find('li').is(':hidden')) {
        $(this).prependTo(".imp").fadeIn("slow");
    } 
    $(this).closest('ul').find('li').not($(this)).slideToggle("slow", function () {
        if ($(this).closest('ul').find('li').is(':hidden')) {
            $(this).prependTo(".imp");
        }
        animating = false;
    });
});

SlideToggle和li - 重复点击重新排序列表

2 个答案: