如何将样式应用于特定孩子的父母

Question

我创建了一个菜单，如果用户单击其中一个侧边菜单项，则侧边菜单和侧边菜单子项都会显示，但我遇到的问题是我的所有菜单项都是粗体而不是选定的孩子和它的父母。

希望我解释清楚，

我的 HTML

<div id="second-menu" class="collapse navbar-collapse menu_two">
    <ul class="nav navbar-nav inside-nav">
        <li class="sub_menu">   
            <a href="#">Section 1</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 2</a>
                </li>
            </ul>
        </li>
        <li class="sub_menu">
            <a href="#">Section 3</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item">
                    <a href="#">Section 4</a>
                </li>
                <li class="sidenav_active">
                    <a href="#">Section 5</a>
                </li>
                <li class="sidenav_item">   
                    <a href="#">Section 6</a>
                </li>
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 7</a>
                </li>
            </ul>
        </li>
        <li class="sub_menu">
            <a href="#">Section 8</a>
            <ul class="sidenav_wrapper">
                <li class="sidenav_item">
                    <a href="#">Section 9</a>
                </li>
                <li class="sidenav_item">
                    <a href="#">Section 10</a>
                </li>
                <li class="sidenav_item sidenavlast">
                    <a href="#">Section 11</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

我的 JS

    $('ul.navbar-nav li').hover(

    function () {
        $(this).find('.sidenav_wrapper:first').css('display', 'block');
    },

    function () {
        $(this).find('.sidenav_wrapper:first').css('display', 'none');
    });


    $(".sidenav_active").parent().css({
        "display": "block"
    });


    if ($('.sidenav_active').length > 0) {
        $('.sidenav_wrapper').parent().find('a').css({
            "font-weight": "700"
        });
    }

我的 CSS

.menu_two {
    border-left: 16px solid #dfdfdf;
    padding-left: 0;
}
.sidenav_wrapper {
    background: none repeat scroll 0 0 #e7ecf5;
    border-left: 6px solid #8fb8e6;
    display: none;
    padding: 0;
}

.active_sub_menu a{
    font-weight: 700;
}

.active_sub_menu .sidenav_wrapper{
        display: block;
    }

.sidenav_active a{
        font-weight: 700;
    }

我的 jsfiddle：JSFIDDLE

Answer 1

我认为你需要的是

$('ul.navbar-nav li').hover(function () {
    $(this).find('.sidenav_wrapper:first').css('display', 'block');
}, function () {
    $(this).find('.sidenav_wrapper:first').css('display', 'none');
});

$(".sidenav_active").parent().css({
    "display": "block"
});

$('.sidenav_active').closest('.sub_menu').find('a').css({
    "font-weight": "700"
});

演示：Fiddle

Answer 2

Demo

font-weight: 700; is in your js

Read about font-weight

根据评论：

Demo2你是这个意思吗？

您可以在悬停时设置font-weight，并在停止悬停时将其移除。

Answer 3

这是你的js造成的：

if ($('.sidenav_active').length > 0) {
    $('.sidenav_wrapper').parent().find('a').css({
        "font-weight": "700"
    });

这是在说；

如果你的 css 中有一个 side_active 类，选择所有 sub_wrapper 元素并选择所有子 a 元素，给它们一个 700 的字体粗细。

我无法说明这段代码要做什么，但删除它会“解决”你的问题。

如果您希望将此作为“主动”选择，您可能需要研究 addClass 和 removeClass 函数。

Answer 4

这是因为下面的代码块：

if ($('.sidenav_active').length > 0) {
    $('.sidenav_wrapper').parent().find('a').css({
        "font-weight": "700"
    });
}

如果我正确理解您的意图，代码应更改为：

$('.sidenav_active').closest('.sub_menu').children('a').css({
    "font-weight": "700"
});

演示：http://jsfiddle.net/hazzik/hzyp66br/

或者使用:has() 和> 选择器的组合：

$('.sub_menu:has(.sidenav_active) > a').css({
    "font-weight": "700"
});

演示：http://jsfiddle.net/hazzik/hzyp66br/1/