0

如何触发与当前按钮关联的远程元素？

例如，

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 in悬停时menu-1，按钮 1 inmenu-2也应该悬停。

因此，当我将按钮 1 in悬停时menu-2，按钮 1 inmenu-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/

4

4 回答 4

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;
}​

http://jsfiddle.net/he7Uk/2/

于 2012-04-09T15:08:51.023 回答
1

据我所知，您不能真正触发像 :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');
    }
});​

小提琴

于 2012-04-09T15:08:41.090 回答
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');
});​

演示：http: //jsfiddle.net/JDG7U/5/

于 2012-04-09T15:10:25.547 回答
0

给他们两个一样的.class

于 2012-04-09T14:42:11.960 回答