изменение стиля родителя и родителя родителя активного элемента с использованием обратного вызова fullPage.js

Question

У меня есть сайт, который использует fullPage.js (https://github.com/alvarotrigo/fullPage.js), а также меню боковой панели для навигации между разделами, поэтому пользователь может использовать колени для перемещения вниз или выбора секций на боковой панели.

Когда пользователь прокручивает, раздел меню, который в данный момент активен, подсвечивается. Однако в Раздел 2 меню расширяет, чтобы показать 5 тем, сгруппированных по 2 категории. Я хочу, чтобы подкатегория, а также раздел, были отмечены как активные, так и темы.

Вот пример того, что я до сих пор, с помощью JQuery: http://jsfiddle.net/rwde78ts/1/

им с помощью обратного вызова «afterSlideLoad», чтобы вызвать функцию, которая изменяет CSS из обоих родителей активного элемента (суб catagory) и родительский родитель (раздел), чтобы отметить их как активные.

Heres код, который я до сих пор, что не работает:

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/

Если вы не смогли понять это самостоятельно, не стесняйтесь спросить, так что я мог бы объяснить по строкам.