javascript - 我正在使用 jquery next 和 cosest 选项来仅选择一个元素，但这将类应用于每个元素

Question

我的HTML菜单是这样的

<div style="margin-top: 200px; width: 140px; text-align: left; line-height: 20px;">
    <div class="lmenu">Home</div>
    <div class="lmenu">About Us</div>
    <div class="lmenu parent">Our Services
        <div class="subparent">
            Event Management
                <div class="child">
                Categories
                </div>
                <div class="child">
                Providing Facilities
                </div>
        </div>
        <div class="subparent">
            Rental
            <div class="child">
                AVEquipments
            </div>
            <div class="child">
                Other Services
            </div>
        </div>
        <div class="subparent">
            Exhibition Stalls 
            <div class="child">
                Standard Stall
            </div>
            <div class="child">
                Designed Stalls
            </div>
        </div>
    </div>
    <div class="lmenu parent">About Us
        <div class="subparent">
            Our Company
            <div class="child">
                Categories
            </div>
            <div class="child">
                Our Team
            </div>
        </div>
    </div>
</div>

我在 mouseover 和 mouseout 函数上使用 jQuery 来查看子项。但是当我只将鼠标悬停在一个菜单项上时，每个子菜单都将可见。

这是我的jquery

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(".lmenu").next().find(".subperent");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "block",
        });
        $sub_itmes.animate({
            "opacity": 1
        });
    },
    mouseleave: function() {
        $sub_itmes = $(this).closest('.lmenu').find(".chilld");
        $sub_itmes.css({
            "display": "none",
        });
        $sub_itmes.animate({
            "opacity": 0
        });
    }
});

我找不到我哪里错了。

谢谢。

Answer 1

你的发现是这样做的

1. 从当前元素中找到.lmenu(它是父元素)
2. 现在找到顶级父级中的所有 .chilld(它将找到所有这些)
3. 显示/隐藏它们

通过使用语法 $(query,scope)，您可以找到当前选择范围内的元素。

var $sub_itmes;
$(".parent").on({
    mouseover: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.subperent',this);
        $sub_itmes.fadeOut('slow');
    }
});

$(".subperent").on({
    mouseover: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeIn('slow');
    },
    mouseleave: function() {
        $sub_itmes = $('.chilld',this);
        $sub_itmes.fadeOut('slow');
    }
});

fiddle

旁注请看hoverIntent插件，它将忽略快速鼠标悬停，但仅在用户似乎想要这样做时才激活。