如何触发与当前按钮关联的远距离元素?
例如
.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
中时,按钮 1 in menu-2
也应该悬停。
因此,当我将按钮 1 悬停在 menu-2
中时,按钮 1 在 menu-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,
http://jsfiddle.net/JDG7U/
我使用的方法是用.hover
类替换您的:hover
并将 CSS 更改分配给该类。然后,我为每个li
添加一个data-
属性并对其进行过滤。(使用类会导致问题,因为我无法在不选取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;
}
http://jsfiddle.net/he7Uk/2/
使用:nth-child
的变体:
$lis = $('.menu li');
$lis.hover(function() {
var index = $(this).index() + 1;
$lis.filter(':nth-child(' + index + ')').addClass('hovered');
}, function() {
$lis.removeClass('hovered');
});
演示:http://jsfiddle.net/JDG7U/5/
据我所知,您不能以这种方式真正触发像 :hover 这样的伪类,但您可以使用类或在 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');
}
});
小提琴
给他们相同的.class