Question

所以我的菜单中有一个无序列表。我进行了设置，以便每当我单击一个菜单项时，该菜单项就会将“活动”类添加到其中，并且该类的任何其他列表项都将其删除。这部分工作正常。现在，我有一个绝对位置的箭头，我只想根据具有“活动”类的类来改变“顶部”样式。它只检查网站最初加载的时间，因此当另一个列表项获得“活动”类时，不会更改位置。注意：“。active-item”是箭头。

$(document).ready(function() {

    $('.nav .nav-items li').click(function () {
        $('.nav .nav-items li').removeClass('active');
        $(this).addClass('active');
    });

});

if ($('.nav .nav-items .nav-dash').hasClass('active')) {
    $('.nav .nav-items .active-item').css('top', '30px');
};

if ($('.nav .nav-items .nav-sales').hasClass('active')) {
    $('.nav .nav-items .active-item').css('top', '90px');
}; etc...

Answer 1

如果您希望在点击时更改位置而不仅仅是在页面加载时，必须将箭头定位代码放在click（）处理程序中以进行菜单项单击事件。

Answer 2

我倾向于在你的样式表中这样做。它会更快：

.nav-items > .active .active-item{
    top: 0px;
}
.nav-items > .active.nav-sales .active-item{
    top: 30px;
}
.nav-items > .active.nav-sales .active-item{
    top: 90px;
} 
/* etc */

通过这种方式，您不必添加几乎所需的代码。

但是如果真的需要在JavaScript中执行此操作，那么应该按照您的意愿执行操作：

$(document).ready(function() {
    function checkNavItems(){
        if ($('.nav .nav-items .nav-dash').hasClass('active')) {
            $('.nav .nav-items .active-item').removeAttr('style');
            $('.nav .nav-items .active-item').css('top', '30px');
        };

        if ($('.nav .nav-items .nav-sales').hasClass('active')) {
            $('.nav .nav-items .active-item').removeAttr('style');
            $('.nav .nav-items .active-item').css('top', '90px');
        }; etc...
    }

    $('.nav .nav-items li').click(function () {
        $('.nav .nav-items li').removeClass('active');
        $(this).addClass('active');
        checkNavItems();
    });

    checkNavItems(); 
});

但是，您的代码并没有按照您的想法执行。首先，您将删除所有活动项节点的样式，然后为所有活动项节点设置顶部。我猜你正试图清除以前设置的所有样式，并且只在这个样式上设置样式。使用CSS管理这种情况比较容易，但是JS应该这样做：

$(document).ready(function() {
    var activeStyles ={
        'nav-dash': {
            'top': '30px'
        }, 
        'nav-sales': {
            'top' : '90px'
        }
        //ETC
    } 

    function checkNavItems(){
        var active = $('.nav .nav-items .active'),
            activeItem = $('.nav .nav-items .active .active-item');
            inactiveItem = $('.nav .nav-items .not(.active) .active-item');
        activeItem.removeAttr('style');

        for (key in activeStyles) {
            if (activeStyles.hasOwnProperty(key) && active.hasClass(key)) {
                activeItem.css(activeStyles[key]);
                break; //Only do it once
            };
        };
    }

    $('.nav .nav-items li').click(function () {
        $('.nav .nav-items li').removeClass('active');
        $(this).addClass('active');
        checkNavItems();
    });

    checkNavItems(); 
});

请记住，我无法真正测试它。如果你有样本标记，那么测试就很简单了。知道我可能有一些语法错误。但是你明白了。

如果item有另一个class更改css

2 个答案: