Question

我有一个看起来像这样的导航

<nav>
    <ul>
        <li class="first active">
            <a href="#">nav 1</a>
            <ul>
                <li><a href="#">nav 1.1</a></li>
                <li><a href="#">nav 1.2</a></li>
                <li><a href="#">nav 1.3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">nav 2</a>
            <ul>
                <li><a href="#">nav 2.1</a></li>
                <li><a href="#">nav 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">nav 3</a></li>
        <li><a href="#">nav 4</a></li>
        <li><a href="#">nav 5</a></li>
        <li><a href="#">nav 6</a></li>
    </ul>
</nav>

活动类最初始终在HTML中设置。目前使用这个非常简单的函数来添加/删除列表项上的活动类，具体取决于鼠标悬停在哪一个上：

function primaryNav() { 

    var navigationLink = $('nav ul li');

    navigationLink.hover(function() { 
        $(this).addClass('active');
    })
    .mouseout(function() {
       $(this).removeClass('active');
    });

}

切换类很好，我只是不确定当鼠标完全离开导航区域时如何确保类保持在li上。

Answer 1

您可以在设置新活动之前删除所有活动的：

function primaryNav() { 
    var navigationLink = $('nav ul li');
    navigationLink.mouseenter(function() { 
        navigationLink.removeClass('active');
        $(this).addClass('active');
    })
    .mouseout(function() {
       //dont do anything
    });
}

Answer 2

您可以在悬停时从所有其他li标记中删除该类，并将其添加到此标记：

$('nav ul li').hover(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
})

此方法的优势在于它仅影响同级li标记，因此不会影响具有"active"类的页面中的任何子项或任何其他项。

Answer 3

您似乎希望最后一个悬停项目保留“Active”类，对吧？如果是这样，试试这个：

function primaryNav() { 

    var navigationLink = $('nav ul li');

    navigationLink.mouseover(function() { 
        $('nav ul li').removeClass('active');
        $(this).addClass('active');
    });

}

此外，为了将来参考，当使用Hover（）时，您不需要指定mouseout或hoverout，您可以通过“，”逗号将out函数链接到函数中。

将课程保留在列表中的最后一个悬停项目上

3 个答案: