Question

我正在处理单页应用程序，我在那里有嵌套菜单，当我选择子菜单上的任何项目时，它会突出显示父菜单和父菜单本身下的所有兄弟项目，但我需要的只是突出显示所选子菜单和父菜单，请指教：

HTML

           <nav role="navigation">
                    <ul id="main_menu">
                        <li class="active"><a href="/travellist">Travel</a></li>
                        <li><a href="/advancedsearch">Advanced Search</a></li>
                        <li><a href="/creditcardmatcher">Credit Card Matcher</a></li>
                        <li id="maintenance_menu">
                            <a href="">Maintenance</a>
                            <ul id="sub_menu">
                                <li><a href="#">Admin Users</a></li>
                                <li><a href="#">Approval Categories</a></li>
                                <li><a href="#">Approval Groups</a></li>
                                <li><a href="#">Approval Sequence</a></li>
                                <li class="divider" style="background:white"></li>
                                <li><a href="#">Category 4/5 Switch</a></li>
                                <li><a href="#">Employee Type</a></li>
                                <li><a href="#">Funding Type</a></li>
                                <li><a href="#">Help Maintenance</a></li>
                                <li><a href="#">Hire Status</a></li>
                                <li><a href="#">Job Title</a></li>
                                <li><a href="#">Offices</a></li>
                                <li><a href="#">Orientation</a></li>
                            </ul>
                        </li>
                        <li><a href="/help">Help</a></li>
                    </ul>
            </nav>

CSS

.main_header nav{
    background-color: #293955;
    height: 40px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    display:block;
    position:relative;
    font-size:12px;
}

.main_header ul{
    list-style: none;
    margin: 0 auto;
}

.main_header li{
    position:relative;
    float: left;
    display: inline;

}

.main_header  li:hover ul{
    display: block;
    position:absolute;
    width:180px;
    background-color: #293955;
    padding:0px;
}

.main_header ul:after {
    content:".";
    display:block;
    height:0px;
    clear:both;
    visibility:hidden;
}

.main_header ul ul{
    position: absolute;
    display: none;
    left:0px;
    width:0px;
}

.main_header nav a:link, .main_header nav a:visited{
    color: #FFF;
    display: inline-block;
    padding: 10px 25px;
    height: 20px;

}

.main_header nav a:active,
.main_header nav .active a:link, 
.main_header nav .active a:visited{
    background-color: #4590d3;
    color: #FFF;
    text-shadow: none;
}

.main_header nav a:hover{
    background-color: #f3dd3e;
    color: #666;
    text-shadow: none;
}

.main_header nav li a{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
}

.main_header nav li li a:hover{
    background-color: #f3dd3e;
    color: #666;
    text-shadow: none;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    -moz-border-bottom-left-radius: 1px;
    -moz-border-bottom-right-radius: 1px;
    -moz-border-top-left-radius: 1px;
    -moz-border-top-right-radius: 1px;
    -webkit-border-bottom-left-radius: 1px;
    -webkit-border-bottom-right-radius: 1px;
    -webkit-border-top-left-radius: 1px;
    -webkit-border-top-right-radius: 1px;
    width:130px;
}

的JavaScript

$(document).ready(function () {

    $('#main_menu > li').click(function (e) {
        $('#main_menu > li').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 1

我认为我有一个可以使用的解决方案：

$('#sub_menu li').click(function () {
  $(this).closest('#sub_menu').parent('li').addClass('active');
    $(this).addClass('active');
});

另一个问题是你设置了一个css规则，它在这个小提琴中被注释掉了：

.main_header nav a:active,
 /*.main_header nav .active a:link, */
.main_header nav .active a:visited { ...

必须重写 - 您必须为活动的主菜单设置活动类以不同的方式，但我认为你可以管理:) 在小提琴中我删除了你的html中的所有链接（至少我希望如此），所以点击更省钱。

更新 - $（'＃sub_menu li'）。click（function（）必须添加到您现有的＃main_menu-click中，将该类激活设置为单击的子菜单项。我可以确认css-suggestion来自worldofjr的另一个答案是运作良好，不会因此而受到任何好评，所以我不会在小提琴中更新它。

小提琴：Menu highlight

Answer 2

您只需选择活动时要突出显示的主菜单链接。将活动链接的CSS选择器更改为以下内容;

.main_header nav > ul > li > a:active,
.main_header nav > ul > li.active > a:link, 
.main_header nav > ul > li.active > a:visited

这样，子菜单链接就不会因为父节点而显示为活动状态。

要在活动时另外突出显示子菜单链接，请将这些选择器添加到同一CSS规则中;

.main_header nav > ul > li > ul#sub_menu > li a:active,
.main_header nav > ul > li > ul#sub_menu > li.active > a:link, 
.main_header nav > ul > li > ul#sub_menu > li.active > a:visited

>选择器允许您仅选择具有正确直接父级的元素。

希望这有帮助！

选择子菜单项时，它会突出显示父菜单下的所有项目

2 个答案: