Question

我想在我的网站上实现一个菜单。

我点击其子菜单时需要突出显示父菜单。

当我点击父菜单时，它会突出显示。但是，当我单击子菜单时，其父级不会突出显示。

这是我的代码。请帮帮我。

<html>
<head>
    <script>

$(document).ready(function(){
            $(' #menu-wplook-main-menu').find('li a').click(function(){
                    $(' #menu-wplook-main-menu').find('li a').removeClass('active');
                if($(this).closest('ul').hasClass('sub-menu')){
                    $(this).parents('li ').addClass('active');
                    //this is a parent element
                }else{
                    $(this).addClass('active');
                }
            });
        });

    </script>
    <style>
           #menu-wplook-main-menu li a.active{
           color:#e53b51;
        }
    </style>
</head>
<body>
<script src="js/base.js"></script>
<div class="wrapper">
<p class="site-title"><a href="index.php"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></a></p>
            <nav class="navigation"id="nav">
                <ul id="menu-wplook-main-menu"class="parent" >
                     <li class="menu-item"><a href="#"id="menu-item1">WHO WE ARE</a>
                        <ul  class="sub-menu"id="sub-menu1">
                            <li class="sub-menu-item1"id="sub-menu-item1"><a href="about-founder.php">ABOUT FOUNDER</a></li>
                            <li class="sub-menu-item2"><a href="about-iab-growth.php">ABOUT IAB</a></li>
                            <!--<li class="menu-item "><a href="team-iab.php">TEAM IAB</a></li>-->
                        </ul>
                    </li>
                    <li class="menu-item current"><a href="#">WHAT WE DO</a>
                        <ul class="sub-menu"id="sub-menu2">
                            <li class="sub-menu-item3 "><a href="education.php">EDUCATION</a></li>
                            <li class="sub-menu-item4"><a href="career-skills.php">CAREER &amp; SKILL TRAINING</a></li>
                            <li class="sub-menu-item5"><a href="residential-services.php">RESIDENTIAL SERVICES</a></li>
                            <li class="sub-menu-item6"><a href="support-services.php">SUPPORT SERVICES</a></li>
                            <li class="sub-menu-item7"><a href="employment.php">EMPLOYMENT</a></li>
                        </ul>
                    </li>
                    <li class="menu-item"><a href="award_slide.php">AWARDS &amp; RECOGNITION</a></li>
                    <li class="menu-item4"><a href="http://theiab.org/awardsandnews/category/newsandevents/">NEWS &amp; EVENTS</a></li>
                    <li class="menu-item5"><a href="contact.php">CONTACT</a></li>
                </ul>
            </nav>
    <div class="clear"></div>
</div>
</body>
</html>

Answer 1

这是一个工作小提琴：http://jsfiddle.net/KPET6/

javascript更改：

$(document).ready(function () {
    $('#menu-wplook-main-menu').find('li a').click(function () {
        $('#menu-wplook-main-menu').find('li a').removeClass('active');
        $(this).addClass('active');
        $($(this).closest('li.menu-item').children()[0]).addClass('active');
    });
});

Answer 2

试试这个fiddle

Jquery更改：

$(document).ready(function(){
     $('li a').click(function(){
            $('li').removeClass('active');
            $(this).parents("li").addClass('active')
      });
});

CSS更改

#menu-wplook-main-menu li.active > a{
      color:#e53b51;
}

Answer 3

工作小提琴：http://jsfiddle.net/WhqxD/1/

JS：

$(document).ready(function(){
    $(' #menu-wplook-main-menu li a').click(function(e){
        e.preventDefault();
        $(' #menu-wplook-main-menu li a').removeClass('active');
        $(this).closest('li.menu-item').find("a:eq(0)").addClass('active');
        $(this).addClass('active');
    });
});

单击其子菜单时，保持父菜单突出显示

3 个答案: