jQuery Select Nested List - целевой элемент списка того же уровня

Question

Первая публикация, так что простите меня, если форматирование не отличное.

Короче говоря, но я создаю функцию аккордеона. Когда каждый элемент выбран, он отключает выбранный параметр, а затем отключает другие теги привязки в неупорядоченном списке, который окружен div.

Проблема, которую я имею, заключается в том, что я хочу иметь список вложений как согласно приведенному ниже образцу. Когда я нажимаю опцию «Элемент списка первичного уровня», я хочу отключить только элементы списка того же уровня. И НЕ вложенный список под ним.

Пробовали разные настройки, пытаясь настроить таргетинг только на этот уровень.

Есть идеи?

Заранее спасибо

<div id="q2">
            <ul class="primary">
            <p class="question">Question 2.</p>
            <li>
                <a class="toggle notselected" href="javascript:void(0);">Item 3</a>
                <div class="inner" id="q2-1">
                  <ul class="secondary">
                      <li>
                          <a href="#" class="toggle notselected">Open Inner #1</a>
                          <div class="inner">
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                              </p>
                          </div>
                      </li>

                      <li>
                          <a href="#" class="toggle notselected">Open Inner #2</a>
                          <div class="inner">
                              <p>
                                  Children will automatically close upon closing its parent.
                              </p>
                          </div>
                      </li>
                  </ul>
                </div>
            </li>

            <li>
                <a class="toggle notselected" href="javascript:void(0);">Item 4</a>
                <div class="inner" id="q2-2">
                  <ul>
                      <li>
                          <a href="#" class="toggle notselected">Technically any number of nested elements</a>
                          <ul class="inner">
                              <li>
                                  <a href="#" class="toggle notselected">Another nested element</a>
                                  <div class="inner">
                                      <p>
                                          As long as the inner element has inner as one of its classes then it will be toggled.
                                      </p>
                                      <p>
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                                          blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
                                      </p>
                                  </div>
                              </li>
                          </ul>
                      </li>

                      <li>Option 2</li>

                      <li>Option 3</li>
                  </ul>
                </div>
            </li>
            </ul>
            </div>
<script>

$('.toggle').click(function(e) {
   e.preventDefault();
   $('#'+div_id + ' > ul.' + current_level + ' li').siblings('a.selected:first').addClass('disabled');
});

</script>

Answer 1

Сделать это можно так:

$('.toggle').click(function(e) {
  e.preventDefault();
  $(this).removeClass("disabled");
  $(this).parent("li").siblings("li").children("a").addClass("disabled");
});

.disabled {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="q2">
  <ul class="primary">
    <p class="question">Question 2.</p>
    <li>
      <a class="toggle notselected" href="javascript:void(0);">Item 3</a>
      <div class="inner" id="q2-1">
        <ul class="secondary">
          <li>
            <a href="#" class="toggle notselected">Open Inner #1</a>
            <div class="inner">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
              </p>
            </div>
          </li>

          <li>
            <a href="#" class="toggle notselected">Open Inner #2</a>
            <div class="inner">
              <p>
                Children will automatically close upon closing its parent.
              </p>
            </div>
          </li>
        </ul>
      </div>
    </li>

    <li>
      <a class="toggle notselected" href="javascript:void(0);">Item 4</a>
      <div class="inner" id="q2-2">
        <ul>
          <li>
            <a href="#" class="toggle notselected">Technically any number of nested elements</a>
            <ul class="inner">
              <li>
                <a href="#" class="toggle notselected">Another nested element</a>
                <div class="inner">
                  <p>
                    As long as the inner element has inner as one of its classes then it will be toggled.
                  </p>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                    blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
                  </p>
                </div>
              </li>
            </ul>
          </li>

          <li>Option 2</li>

          <li>Option 3</li>
        </ul>
      </div>
    </li>
  </ul>
</div>