Добавляем классы к дочерним элементам “одноуровневого” списка

01.01.2017

Проблема в том, что есть список, с дочерними списками, но из-за сложности структуры CMS, эти дочерние списки не являются вложенными ul > ul, их структура выглядит примерно так

<ul Class="sidebar-menu">
  <li class="item has-submenu">Campaign 1</li>
  <li class="subitem active"><a >Child 1 Campaign 1</a></li>
  <li class="subitem"><a>Child 2 Campaign 1</a></li>

  <li class="item has-submenu">Campaign 2</li>
  <li class="subitem"><a>Child 1 Campaign 2</a></li>
  <li class="subitem"><a>Child 2 Campaign 2</a></li>

  <li class="item has-submenu">Campaign 3</li>
  <li class="subitem"><a>Child 1 Campaign 3</a></li>
  <li class="subitem"><a>Child 2 Campaign 3</a></li>
</ul>

Нужно, чтобы при активном дочернем элементе, всем его соседним элементам одного родителя задавался класс active-menu.

Такой скрипт решает эту проблему:

var $liMenu = $(".sidebar-menu li");
var $activeMenu = $(".sidebar-menu li.active");
var $ind = $activeMenu.index();
var prev = 0;

$activeMenu.addClass('active-menu');
$activeMenu.prevUntil('.has-submenu').addClass('active-menu');
$activeMenu.nextUntil('.has-submenu').addClass('active-menu');

for ( var i = $ind; i > 0; i--){
  if ( prev == 0 ) {
    if ( $liMenu.eq($ind).prev().hasClass("has-submenu") ) {
      $liMenu.eq($ind).prev().addClass('active-menu');
      prev = $ind-1;
      break;
    } else {
      prev = $ind-1;
    }
  } 
  else {
    if ( $liMenu.eq(prev).prev().hasClass("has-submenu") ) {
      $liMenu.eq(prev).prev().addClass('active-menu');
      prev = prev-1;
      break;
    } else {
      prev = prev-1;
    }
  }
}

За помощь благодарность Algiz’у.

Рекомендую к прочтению:

Оставить комментарий