这里是演示 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);
});
但我不确定这是否正确。有什么想法吗?
最佳答案
您确实应该使用 mouseenter、mouseleave 事件,基于:http://jquery.com/upgrade-guide/1.9/#hover-pseudo-event在你的 fiddle 中,你有一部分在点击时为父元素设置数据,这可能会更简单:
$('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'));
});
如果您动态创建附加到 ul 的 li 元素:
$('ul').on('click', '.list-item[data-toggle="collapse"] ', function () {
alert($(this).data('attr'));
$(this).data('attr', !$(this).data('attr'));
});
关于javascript - 多个 :not() with dynamic element attribute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15708594/