使用 fullPage.js 回调更改活动元素的父项和父项的父项的样式

Question

我有一个使用 fullPage.js (https://github.com/alvarotrigo/fullPage.js) 的网站以及用于在部分之间导航的侧边栏菜单，因此用户可以使用鼠标滚轮向下移动或选择侧边栏上的部分。

当用户滚动时，当前处于活动状态的菜单部分会突出显示。然而，在第 2 节中，菜单扩展为显示分为 2 个类别的 5 个主题。我希望将子类别和部分标记为活动以及主题。

这是我目前使用 jQuery 的示例： http://jsfiddle.net/rwde78ts/1/

我使用回调“afterSlideLoad”来调用一个函数，该函数更改活动元素的父级（子类别）和父级父级（部分）的 CSS 以将它们标记为活动。

这是我到目前为止的代码，但它不起作用：

afterSlideLoad: (function(){
             $(".active").parent().css("color", "black");
             $(".active").parent().parent().css("color", "black");
         })

有谁知道我做错了什么？

Answer 1

为了快速回答您的问题，我将首先提供解决方案。

虽然这不是最佳实践，也不能帮助您学习正确的方法来设计 html 结构和高效快速地遍历 DOM，但它会解决这个特定问题。

如果设计得更好，这可能根本不需要 Javascript，而 CSS 将是完美的解决方案。

我不想解释我的解决方案是如何工作的，因此您将有机会从中学习。

我替换了以下拖线：

afterSlideLoad:(function(){
  $(".active").parent().css("color", "black");
  $(".active").parent().parent().css("color", "black");
})

到这个。为了更好地理解，这被打破了。 [当然，这也适用于代码。]）：

   afterLoad: function(){
            /* Here comes your previous code... */

            console.log('afterSlideLoad Changed to afterLoad');
            $('.inlinedColor')
            .css('color','gray')
            .removeClass('inlinedColor');

            $('li.active')
            .prevAll('span.year')
            .first()
            .add(
                $('li.active')
                .parents('li')
                .find('>a span span')
            )
            .addClass('inlinedColor')
            .css('color','black');
         }

以上所有内容都在这里：http://jsfiddle.net/rwde78ts/10/

如果你自己没有弄明白，请不要犹豫，我可以逐行解释。