Меню аккордеона - только один открытый

У меня возникают некоторые трудности, пытаясь заставить мое меню стиля аккордеона jQuery отображать только один открытый контент одновременно с activeклассом, который устанавливается только в опциях открытого меню без того, чтобы родительский объект также был переключен.

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

Я просмотрел StackOverflow для ответов, однако ни один из них, с которыми я столкнулся, не разрешил мои проблемы, тем не менее я уверен, что это будет дубликат другого вопроса, поэтому мои извинения в продвинутом состоянии!

$('.SideNav .Menu li a').click(function() {
        if($(this).closest("li").children("ul").length) {
                $(this).parent().toggleClass('active');
                $(this).next().slideToggle('fast');
        }
});
ul.Menu li ul { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
  <ul class="Menu">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">2.1 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.1.1</a></li>
          <li><a href="javascript:;">2.1.2</a></li>
          <li><a href="javascript:;">2.1.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.2 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.2.1</a></li>
          <li><a href="javascript:;">2.2.2</a></li>
          <li><a href="javascript:;">2.2.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.3</a></li>
      </ul>
    </li>
    <li><a href="javascript:;">3 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">3.1</a></li>
        <li><a href="javascript:;">3.2</a></li>
        <li><a href="javascript:;">3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

Чтобы уточнить:

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

javascript,jquery,

0

Ответов: 1

1 принят

Я надеюсь, это поможет.

$('.SideNav .Menu li a').click(function() {
  $(this).parent().siblings().find("ul").hide('fast');
        if($(this).closest("li").children("ul").length) {
                $(this).parent().toggleClass('active');
                $(this).next().slideToggle('fast');
        }
});
ul.Menu li ul { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="SideNav">
  <ul class="Menu">
    <li><a href="javascript:;">1</a></li>
    <li><a href="javascript:;">2 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">2.1 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.1.1</a></li>
          <li><a href="javascript:;">2.1.2</a></li>
          <li><a href="javascript:;">2.1.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.2 - I have siblings</a>
        <ul>
          <li><a href="javascript:;">2.2.1</a></li>
          <li><a href="javascript:;">2.2.2</a></li>
          <li><a href="javascript:;">2.2.3</a></li>
        </ul>
        </li>
        <li><a href="javascript:;">2.3</a></li>
      </ul>
    </li>
    <li><a href="javascript:;">3 - I have siblings</a>
      <ul>
        <li><a href="javascript:;">3.1</a></li>
        <li><a href="javascript:;">3.2</a></li>
        <li><a href="javascript:;">3.3</a></li>
      </ul>
    </li>
  </ul>
</div>

JavaScript, JQuery,
Похожие вопросы
Яндекс.Метрика