jquery - 使用 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/

如果您自己无法弄清楚，请随时询问，以便我可以逐行解释。