Question

我的网站使用了fullPage.js（https://github.com/alvarotrigo/fullPage.js）以及侧栏菜单，可以在各个部分之间进行导航，因此用户可以使用鼠标滚轮向下移动或选择侧栏上的部分。

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

以下是我到目前为止使用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/

如果你没有设法自己解决，请不要犹豫，所以我可以逐行解释。

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

1 个答案: