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

Question

单击ul列表中的任何li项目后- 所有项目都显示/隐藏，除了单击的项目。我尝试使用slideToggle制作漂亮的动画。但是随着重复点击同一个项目列表，改变列表的顺序。

jsfiddle 示例

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/

---

更新（评论后）

您可以在动画完成后进行 prependint

这是一些代码（带有一些检查）

$('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;
    });
});