Как переключать стрелки в выпадающем меню с помощью родственных селекторов

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

Я пытаюсь добавить toggleClass('open') в свой скрипт, но я не могу понять, куда он должен идти, чтобы класс переключался, когда пункт меню открывается и закрывается, щелкая заголовок, а также переключается обратно на .closed при открытии другого пункта меню. Я могу заставить его переключаться при нажатии на заголовки, добавляя $(this).toggleClass('open');в начало функции, но он не переключается снова, если вы открываете другой пункт меню.

HTML:

<nav id="main-nav" role="navigation">
        <div class="block">
            <h2 class="block-title">Main menu</h2>
            <ul>
                <li class="is-active">
                    <a href="#">Link</a>
                </li><!--
             --><li>
                    <a class="toggle-sub-nav closed" href="#">Link ></a>
                      <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li><!--
             --><li>
                    <a class="toggle-sub-nav closed" href="#">Link ></a>
                    <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li> <a class="toggle-sub-nav closed" href="#">Sub Link ></a>
                    <ul class="sub-nav">
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                          <li><a href="#">Sub link</a></li>
                      </ul></li>
                          <li><a href="#">Sub link</a></li>
                      </ul>
                </li><!--
             --><li>
                    <a href="#">Link</a>
                </li>
            </ul>
           </div>
</nav>

CSS подменю:

.sub-nav { 

     height: 0px;
    -webkit-transition: all 600ms cubic-bezier(.42,0,.58,1);
    -moz-transition: all 600ms cubic-bezier(.42,0,.58,1);
    -o-transition: all 600ms cubic-bezier(.42,0,.58,1);
    -ms-transition: all 600ms cubic-bezier(.42,0,.58,1);
    transition: all 600ms cubic-bezier(.42,0,.58,1);
    overflow:hidden;

  }


  .sub-nav-open {

    height: auto;
    max-height: 500px;

  }

.sub-nav li { background-color: #666; } 

.closed { background: url(../assets/img/arrows.png) no-repeat 90% -24px; }

.open { background: url(../assets/img/arrows.png) no-repeat 90% 17px; }

Jquery:

$(function () {
    $(".toggle-sub-nav").click(function () {
        if ($(this).siblings('ul').hasClass('sub-nav-open')) {
            $(this).siblings('ul').find('sub-nav-open').andSelf().removeClass('sub-nav-open')
        } else {
            $('.sub-nav').not($(this).closest('.sub-nav')).removeClass('sub-nav-open');
            $(this).next(".sub-nav").toggleClass('sub-nav-open');
        }
        return false;
    });
});

html jquery toggleclass
person Ashley Briscoe    schedule 20.10.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

После долгих игр я изменил jquery и заставил его работать так, как я просил, единственная проблема, которая у меня осталась, это когда вы открываете подменю 2-го уровня, сбрасывает изображение стрелки на верхнем уровне. Я действительно не уверен, как это сделать, поэтому любые идеи приветствуются, или если у кого-то из вас есть более чистое решение, я бы хотел его услышать?:

Вот измененная функция:

$(function () {
    $(".toggle-sub-nav").click(function () {
        if ($(this).siblings('ul').hasClass('sub-nav-open')) {
            $(this).removeClass('open').siblings('ul').find('sub-nav-open').andSelf().removeClass('sub-nav-open')
        } else {
     $('.toggle-sub-nav').not($(this).closest('.toggle-sub-nav')).removeClass('open');
            $('.sub-nav').not($(this).closest('.sub-nav')).removeClass('sub-nav-open');
            $(this).toggleClass('open').next(".sub-nav").toggleClass('sub-nav-open');
        }
        return false;
    });
});
person Ashley Briscoe    schedule 26.10.2013