Обновление «текущего» класса в мегамену с помощью jQuery

Question

У меня есть меню, стилизованное с помощью jquery и CSS, поэтому структура выглядит следующим образом:

<div id="nav_top" class="clearfix round_top">
    <ul class="clearfix round_all">
        <li class="current"><a href="index.php"><img src="images/icons/home.png"/>Home</a></li>

        <li><a href="#"><img src="images/icons/users_2.png"/>Users</a>
            <ul class="dropdown">
                <li><a href="users.php">Create user</a></li>
                <li><a href="view_users.php">View users</a></li>
                <li><a href="#" class="has_slide">Group management</a>
                    <ul class="slideout">   
                        <li><a href="#">View groups</a></li>
                        <li><a href="#">Manage permissions</a></li>
                    </ul>
                </li>
                <li><a href="#">Another menu item</a></li>
            </ul>
        </li>

    </ul>
</div>

Итак, как вы можете видеть, многие уровни могут иметь привязку.

Основная идея состоит в том, чтобы иметь уровень TOP с текущим, потому что это единственная часть, которую вы можете видеть без наведения.

Мой первый подход состоял в том, чтобы захватить текущий URL через window.location.pathname, а затем выполнить итерацию через каждый $('#nav_top a') стакая функция:

$('#nav_top a').each(function(){
if ( path.search($(this).attr('href') != -1){
   $(this).parent().parent().parent().addClass('current');
   $('.current').removeClass('current');
}
});

Я также знаю, что могу выбрать с помощью href, но я собирался провести тест производительности между обоими методами, но, в любом случае, суть в том, что это работает только для одного изуровни из-за вложенности .parent().

Как я могу сделать это расширяемым для всех уровней?

Answer 1

Вы можете попробовать это. Использование jQuery closest() http://api.jquery.com/closest/.

Обратите внимание, что я также переключился на удаление и добавление класса. То, как вы это сделали, просто удалило бы его из элемента, к которому вы только что добавили.

$('#nav_top a').each(function(){
   if ( path.search($(this).attr('href') != -1){
      $('.current').removeClass('current');
      $(this).closest('.top-level').addClass('current');
   }
});

Edit:

Добавьте класс top-level на свой верхний уровень <li> s