Открываются подпункты другого элемента, помимо запланированных

Question

Я хотел бы знать, почему при нажатии на «Capítulo 4» также открываются подэлементы «Capítulo 6»?

То же самое происходит при нажатии на «Capítulo 2», открываются подэлементы «Capítulo 1».

CODEPEN:

https://codepen.io/ogonzales/pen/QWjmorP

  $(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

  });

Answer 1

Это происходит потому, что вы не использовали уникальный id для своих ul элементов . Поэтому всякий раз, когда вы пытаетесь открыть / закрыть один из своих сворачиваемых ul, ссылаясь на них с помощью тега привязки href, поскольку их id не уникален, оба ul откроются. Чтобы исправить это, присвойте каждому ul уникальный id, а затем обратитесь к этому уникальному идентификатору с желаемым a тегом . Вы можете узнать больше о id s здесь .

Для большей иллюстрации, скажем, мы получили этот ul элемент:

<ul class="collapse list-unstyled" id="homeSubmenu">
  <li>
    <a href="#">Introducción</a>
  </li>
  <li>
    <a href="#">¿Qué es la salvación?</a>
  </li>
  <li>
    <a href="#">¿Se pierde la salvación?</a>
  </li>
</ul>

и соответствующий якорь тег для этого должен быть следующим:

<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">

Существует id из homeSubmenu, который относится к элементу ul, и мы ссылаемся на него с помощью href="#homeSubmenu".

Таким образом, следующий элемент должен иметь другой id, чтобы работать должным образом, давайте выберем другой:

<ul class="collapse list-unstyled" id="homeSubmenu2">
  <li>
    <a href="#">Introducción</a>
  </li>
  <li>
    <a href="#">¿Qué es la salvación?</a>
  </li>
  <li>
    <a href="#">¿Se pierde la salvación?</a>
  </li>
</ul>

Таким образом, соответствующий ему должен быть этот:

<a href="#homeSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">

Вот полная рабочая демонстрация: codepen.io