Question

我正在尝试做什么：

如果 .list-item 的属性 data-attr 为真

，则停用动画

以下是工作示例：

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

但我不确定这是否合适。有什么想法吗？

Answer 1

你真的应该使用mouseenter，mouseleave事件，基于：http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event并且在你的小提琴中你有一个部分设置点击的父元素的数据可能更简单：

$('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()遍历，如下所示：

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

multiple：not（）with dynamic element attribute

1 个答案: