如何触发与当前按钮关联的远端元素?
例如,
HTML
<ul class="menu-1">
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 2</a></li>
</ul>
<ul class="menu-2">
<li><a href="#">button 1</a></li>
<li><a href="#">button 2</a></li>
<li><a href="#">button 2</a></li>
</ul>
因此,当我将按钮1 悬停在menu-1
中时,menu-2
中的按钮1 也应该悬停。
因此,当我将按钮1 悬停在menu-2
中时,menu-1
中的按钮1 也应该悬停。
我的工作jquery,
$(".menu-1 li").hover(function () {
var text = $(this).text();
if ($('.menu-2 li a:contains("'+text+'")').length > 0) {
$('.menu-2 li a:contains("'+text+'")').trigger("mouseenter");
}
});
的jsfiddle,
答案 0 :(得分:2)
我使用的方法是将:hover
替换为.hover
类,并将CSS更改分配给该类。然后,我为每个data-
添加了li
属性并对其进行了过滤。 (使用类会导致问题,因为在没有选择hover
类的情况下我无法读取任意类属性。)
有点复杂,但它留下了一些非常简短的代码,并且如果你需要,它允许重新排序元素。
HTML:
<ul class="menu-1">
<li data-num="1"><a href="#">button 1</a></li>
<li data-num="2"><a href="#">button 2</a></li>
<li data-num="3"><a href="#">button 3</a></li>
</ul>
<ul class="menu-2">
<li data-num="2"><a href="#">button 2</a></li>
<li data-num="3"><a href="#">button 3</a></li>
<li data-num="1"><a href="#">button 1</a></li>
</ul>
JS:
$('ul li').hover(function() {
var num = $(this).data('num');
$('li').filter(function() {
return $(this).data('num') === num;
}).toggleClass('hover');
});
CSS:
ul li.hover a {
color: green;
}
答案 1 :(得分:1)
据我所知你无法真正触发伪类,例如:以这种方式悬停,但你可以在JS中使用类或在mouseenter / mouseleave事件中设置样式,或者只是直接更改CSS,像:
$(".menu-1 li").on({
mouseenter: function () {
var index = $(this).index();
$('.menu-2 li a').eq(index).css('color', 'green');
},
mouseleave: function() {
var index = $(this).index();
$('.menu-2 li a').eq(index).css('color', 'black');
}
});
或与班级一起工作:
$(".menu-1 li, .menu-2 li").on({
mouseenter: function () {
var index = $(this).index(),
elems = $('.menu-1 li a:eq('+index+'), .menu-2 li a:eq('+index+')');
$(elems).addClass('hover');
},
mouseleave: function () {
var index = $(this).index(),
elems = $('.menu-1 li a:eq('+index+'), .menu-2 li a:eq('+index+')');
$(elems).removeClass('hover');
}
});
答案 2 :(得分:1)
还有一个使用:nth-child
的变体:
$lis = $('.menu li');
$lis.hover(function() {
var index = $(this).index() + 1;
$lis.filter(':nth-child(' + index + ')').addClass('hovered');
}, function() {
$lis.removeClass('hovered');
});
答案 3 :(得分:0)
为他们提供相同的.class