Question

我的jquery脚本在以下网站上遇到了一个奇怪的问题：http://www.zugestellt.com

当我向下或向上滚动时，当前区域在菜单中正确突出显示（添加了类＆＃34;当前菜单项＆＃34;）。

现在奇怪的是：如果我选择菜单项，请点击课程＆＃34; current-menu-item＆＃34;不再从我点击的菜单项中删除。

这是我的代码：

(function($){

var lastId,
    topMenu = $("#header #menu"),
    topMenuHeight = topMenu.outerHeight() + 15,
    menuItems = topMenu.find("a"),
    scrollItems = menuItems.map(function(){
        var href = $(this).attr("href");
        href = '.scroll-' + href.replace('/#','').toLowerCase();
        var item = $( $(href) );
        if (item.length) { return item; }
    });

    menuItems.parents('li').removeClass("current-menu-item");

$(document).on('click', "#header #menu a" ,function(e) {
    var href = $(this).attr("href");
    href = '.scroll-' + href.replace('/#','').toLowerCase();
    var offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;

    $('html, body').stop().animate({
        scrollTop: offsetTop
    }, 300);

    e.preventDefault();

});


$(window).scroll(function(){

    var fromTop = $(this).scrollTop() + topMenuHeight;
    var cur = scrollItems.map(function(){
        if ($(this).offset().top < fromTop)
        return this;
    });

    cur = cur[cur.length-1];

    var id = '';
    if(cur && cur.length) {

        id =  $.grep(cur[0].className.split(" "), function(v, i){
            return v.indexOf('scroll-') === 0;
        }).join();

    }

    if (lastId !== id) {
        lastId = id;

        var new_url = id.replace('scroll-','/#');

        menuItems
            .parents('li')
            .removeClass("current-menu-item")
            .end()
            .filter('a[href*="' + new_url + '"]')
            .parents('li')
            .addClass("current-menu-item");
    }

});

})(jQuery);

现在，如果您想知道为什么我不使用哈希来选择正确的部分，这是来自themeforest的模板，来自此主题的网站建设者不允许添加ID而不是类。< / p>

希望有人能帮助我。

Answer 1

当你再次点击菜单时，它会添加.sfHover类..所以你需要删除它..试试这个

menuItems
   .parents('li')
   .removeClass("current-menu-item")
   .removeClass("sfHover")
   .end()
   .filter('a[href*="' + new_url + '"]')
   .parents('li')
   .addClass("current-menu-item");

使用window.scroll函数和删除类的奇怪行为

1 个答案: