Question

我正在使用jQuery进行导航下拉菜单。当您悬停父选项卡时，导航菜单会显示子选项卡。但我希望在它悬停时向父标签添加一个类。所以我可以在悬停时为它提供与子标签相同的颜色。

有人可以帮我吗？感谢

我的jQuery：

    $(document).ready(function(e) {
        $("#header_inner .menu-header-container ul li").hover(function() {
            $("#header_inner .menu-header-container ul li a", this).addClass('hover');
            $("ul.sub-menu", this).slideToggle(50);
        });
    });

HTML：

<div class="menu-header-container">
    <ul id="menu-header" class="menu">
        <li><a href="http://www.url.com/">Risicomanagement</a>
            <ul class="sub-menu">
                <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.url.com/">Bedrijfsaansprakelijkheidsverzekering</a></li>
                <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://www.url.com/">Beroepsaansprakelijkheidsverzekering</a></li>
                <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://www.url.com/">Bestuurdersaansprakelijkheidsverzekering</a></li>
            </ul>
        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.url.com/">Pensioen</a></li>
        <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://www.url.com/">Hypotheek</a></li>
        <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.url.com/">Zorg</a></li>
        <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://www.url.com/">Consultancy</a></li>
    </ul>
</div>

Answer 1

尝试，

$(document).ready(function(e) {
    $("#header_inner .menu-header-container ul li").hover(function() {
        $(this).find("a").addClass('hover');
        $(this).closest(".sub-menu").slideToggle(50);
    });
});

Answer 2

work jsfiddle：http://jsfiddle.net/83Ujj/ CSS：在jsfiddle

中添加

$(document).ready(function (e) {
    $("#menu-header li").hover(function () {
        $(this).find("a").addClass("hover");
        $(this).find('.sub-menu').show();
    }, function () {
        $(this).find("a").removeClass("hover");
        $(this).find('.sub-menu').hide();
    });
});

jQuery Navigation选项卡在悬停时添加类

2 个答案: