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

ProgramBox

Меню аккордеона — только одно открытое

Post author:admin
Запись опубликована:22 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

У меня возникли некоторые трудности при попытке заставить мое меню в стиле аккордеона 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 сдвинется назадвверх.

1. Где находится аккордеон, который вы использовали?

2. @Aravind Разве не так называется этот стиль меню?

3. чего вы именно хотите? если вы можете добавить скриншот или свой поток меню?

4. Не изобретайте велосипед заново — jqueryui.com/accordion

5. @Aravind Я хочу, чтобы при нажатии на меню все остальные элементы, которых нет в этом дереве, перемещались обратно вверх, поэтому, если вы 2 > 2.1 > 2.1.1 нажмете, а затем нажмете 2 > 2.1 > 2.1.2 , затем 2 > 2.1 > 2.1.1 будет скользить вверх, то же самое, если вы нажмете 2 > 2.2 , то 2 > 2.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>

Развернуть фрагмент

1. это почти идеально! Не могли бы вы любезно сделать так, чтобы после 2 > 2.1 > 2.1.1 расширения и нажатия на 3 него не только 2 скользило вверх, но и все внутри 2 , поэтому при повторном открытии они закрывались?

Метки: Меню аккордеона — только одно открытое