Question

对于最近的Wordpress项目，我创建了一个带有类别的固定子菜单。现在，客户希望在列出摘录后的页面时向下突出显示该类别。每个帖子仅限一个类别。我将类别添加到菜单ID和帖子类中。

如果class和id匹配，我想在菜单项中添加一个“active”类。我使用waypoints js在滚动上添加项目，并发现一些jQuery，如果菜单链接和帖子ID匹配。我已经尝试了很多方法，虽然我无法获得一些代码来比较类和id：

// Helper functions
function getRelatedNavigation(el){
    return $('nav a[href=#'+$(el).attr('id')+']');
}

// Waypoints
$('article')
   .waypoint(function(direction) {
     getRelatedNavigation(this).toggleClass('active', direction === 'down');
   }, {
     offset: '90%'
   })
   .waypoint(function(direction) {
     getRelatedNavigation(this).toggleClass('active', direction === 'up');
   }, {
     offset: function() {  return -$(this).height() + 100; }
   });

有关如何更新Helper函数以比较导航ID和文章类或Helper功能的更好选项的任何想法？

Answer 1

在阅读了有关jQuery wrapAll的大量有关SO的主题以获取可能的解决方案以组合相同类别的部分之后，我最终专注于使用Waypoints.Group类的简单toArray。我已经将waypoints js用于其他一些功能，并且我能够挂钩group.first()和group.last()个实例。变量回调到子菜单中每个项目标识为id的类别，并使用这些类别选择sections类别中标识的类别。

function addSubNavClass(){
    var catsArray = jQuery('#sub-menu li').map(function(){ return this.id }).toArray();
    var bottomBarHeight = jQuery('#category-bar .bar').height(),
    jQuery.each(catsArray, function(index, cat) {
        var catSections = jQuery('.single-section.' + cat)
        var relatedSubNav = jQuery('#sub-menu li#' + cat)

        catSections.waypoint({
        handler: function(direction) {
            if (this === this.group.first()) {
                relatedSubNav.toggleClass('current-menu-item', direction === 'down');
            }
        },
            group: cat,
            offset: '70%',
        });

        catSections.waypoint({
        handler: function(direction) {
            if (this === this.group.last()) {
                relatedSubNav.toggleClass('current-menu-item', direction === 'up');
            }
        },
            group: cat,
            offset: function() {
                        return -jQuery(this.element).height() + bottomBarHeight + 30
                    },
        });
    })
}

子菜单突出显示的jQuery匹配类和ID

1 个答案: