1

ここにデモがありますhttp://jsfiddle.net/NbzaE/3/

私がやろうとしていること:

.list-itemの属性data-attrがtrueの場合、アニメーションを無効にします

これが実際の例です：

$('.list-item > a:not(.active)').hover(function(){
        $(this).clearQueue().stop().animate({
            marginLeft: 40
        }, 250);
    }, function(){
        $('.list-item:not([data-attr="true"]) > a:not(.active)').clearQueue().stop().animate({
            marginLeft: 0
        }, 250);
 });

しかし、それが適切かどうかはわかりません。何か案は？

4

1 に答える 1

0

http://jquery.com/upgrade-guide/1.9/#hover-pseudo-eventに基づいて、mouseenter、mouseleave イベントを実際に使用する必要があります。フィドルには、クリック時に親要素のデータを設定する部分があります。もっと簡単かもしれません：

$('li.list-item').on('mouseenter', '>a:not(.active)', function () {
    $(this).clearQueue().stop().animate({
        marginLeft: 40
    }, 250);
});
$('li.list-item').on('mouseleave', '>a:not(.active)', function () {
    $(this).clearQueue().stop().animate({
        marginLeft: 0
    }, 250);
});

$('.list-item[data-toggle="collapse"] ').on('click', '>a', function () {
    $(this).parent().data('attr', !$(this).parent().data('attr'));
});

EDIT1:サイドノート、次の.parent()ようにトラバーサルを保存するリンクではなく、要素でその2番目のイベントをキャプチャすることもできます:

$('.list-item[data-toggle="collapse"] ').click( function () {
    $(this).data('attr', !$(this).data('attr'));
});

そして、これらの li 要素を動的に作成している場合は、ul に添付します。

$('ul').on('click', '.list-item[data-toggle="collapse"] ', function () {
    alert($(this).data('attr'));
    $(this).data('attr', !$(this).data('attr'));
});
于 2013-03-29T20:59:48.573 に答える