0

ulリスト内の任意のアイテムをクリックすると、クリックしたアイテムを除くすべてのアイテムが表示/非表示になります。私は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;
}
4

2 に答える 2

1

なぜそのprependTo方法を使用しているのですか？

それはDOMを変更し、それがそれが起こっている理由です..

2行を削除すると、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/のデモ

于 2013-10-07T10:25:26.650 に答える
1

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;
    });
});
于 2013-10-07T10:33:43.423 に答える