2

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

2 回答 2

3

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

于 2013-08-28T21:35:12.347 回答
0

我倾向于在您的样式表中执行此操作。它会快很多：

.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(); 
});

请记住，我无法真正测试它。如果您有示例标记，那么测试起来会很简单。知道我可能有一些语法错误。但你明白了。

于 2013-08-28T21:59:54.537 回答