导航栏上的活动菜单和子菜单

Question

我有如下导航菜单

<div id="nav">
<ul>
    <li><a href="<?php echo base_url(); ?>home">HOME</a></li>
    <li><a href="#">Classes</a>
        <ul>
            <li><a href="<?php echo base_url(); ?>class_one">class One</a></li>
            <li><a href="<?php echo base_url(); ?>class_two">Class Two</a></li>
            <li><a href="<?php echo base_url(); ?>class_three">Class Three</a></li>
            <li><a href="<?php echo base_url(); ?>class_four">Class Four</a></li>
        </ul>
    </li>
    <li><a href="<?php echo base_url(); ?>results">Exams</a>
    </li>    
</ul>
</div>
<script>
$(document).ready(function () {
    $("[href]").each(function () {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});
</script>

除了导航菜单外，我还有一个脚本，该脚本将通过使用CSS文件中的活动类来更改菜单的颜色来显示用户所在的页面。 因此，除“类”之外的所有主菜单都工作正常，但是我想要的是用户在“类”菜单下的任何子菜单上显示“类”作为活动菜单而不是其子菜单时。 如何做到这一点？

Answer 1

加

$(this).parents('li').find('> a').addClass("active");

在if语句中。

这个代码是找到匹配的元素的所有家长它们是li标签，然后找到匹配的父母这是直接孩子a标签，太增加了活动类给他们