javascript - 如何使用jquery将.current类添加到父类li

Question

我想知道是否有人可以帮助我。我尝试将 .current 类添加到导航中的事件父级。

这是我的导航:

<ul id="top-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
    <ul id="about-dropdown" class="dropdown">
        <li><a href="#">Sub Cat</a></li>
        <li><a href="#">Sub Cat 1</a></li>
        <li><a href="#">Sub Cat 2</a></li>
    </ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

我已经设法让 .current 类显示在当前页面上，但是当用户位于子页面上时，例如。 “Sub Cat 1”我想要“关于”标签来添加.current页面。

这是我的 Jquery:

 var url = window.location.pathname, 
 urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
    // now grab every link from the navigation
    $('#top-nav a').each(function(){
        // and test its normalized href against the url pathname regexp
        if(urlRegExp.test(this.href.replace(/\/$/,''))){
            $(this).addClass('current');
        }

        $(document).ready(function(){
$("li.current").parent().addClass("current");
});

                $(document).ready(function(){
$("ul.current").parent().addClass("current-parent");
});

如果有人可以提供帮助，我们将不胜感激:-)

谢谢

Answer 1

<ul id="top-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
    <ul id="about-dropdown" class="dropdown">
        <li><a href="#">Sub Cat</a></li>
        <li><a href="#">Sub Cat 1</a></li>
        <li><a href="#">Sub Cat 2</a></li>
    </ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

JavaScript

$('#top-nav li a').hover(function(){
    $(this).addClass('current');
}).mouseleave(function(){
    $(this).removeClass('current');
});
$('#about-dropdown').hover(function(){
    $(this).prev().addClass('current');
}).mouseleave(function(){
    $(this).prev().removeClass('current');
});

CSS

.current{
    background: #F00;
}

fiddle

http://jsfiddle.net/7LzLk8aw/