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

Question

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

在用户滚动时，突出显示当前处于活动状态的菜单部分。然而，在第2节中，菜单扩展到显示5个主题，并将其分组到2个目录中。我想要的子灾难，以及部分，被标记为积极的以及主题。

下面是我到目前为止使用的jQuery：http://jsfiddle.net/rwde78ts/1/的示例

我使用回调"afterSlideLoad“调用一个函数，该函数将active元素的父元素(子存储部分)和父元素的父元素(部分)的CSS都更改为active。

下面是我到目前为止所掌握的代码，这些代码不起作用：

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/

如果你没有自己想出办法，请不要犹豫，这样我就可以一行行地解释。