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

我认为你想要的是parents()功能：

$(document).ready(function(){
    $("li.current").parents('#top-nav > li').addClass("current");
});

如果您只想要顶级项目，请使用上面的选择器。如果您希望所有家长使用'#top-nav li'

Answer 2

<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;
}

小提琴

http://jsfiddle.net/7LzLk8aw/

如何使用jquery将.current类添加到parent li

2 个答案: