Javascript JQuery для переключения вложенных элементов с флажком

Question

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

Я понимаю, что могу использовать less / sass, чтобы скрывать / показывать эти элементы, нажимая на них,но я хотел бы узнать, как это сделать с помощью jQuery.

$(document).ready(() => {

 $('.sub-ul').hide();
  
 $('.side-checkbox').each(function () {
    var obj = $('.sub-ul');
    $(this).click(function () {
      if ($(this).is(':checked')) {
        obj.show(300);
      } else {
        obj.hide(200);
      }
    });
  });
});

a {
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-nav">
  <li class="li-nav">
  
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
  <li class="li-nav">
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">
        
        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">
        

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
</ul>

Answer 1

Если я правильно понимаю ваш вопрос, тогда ответом является простая настройка

var obj = $('+ .sub-ul', this);  // Old code $('sub-ul');

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

По сути, это изменение выполняется следующим образом:

для текущего .side-checkboxпо щелчку (то есть this) выберите брата .sub-ul, который следует непосредственно за этим .side-checkbox

Вот фрагмент рабочего кода - надеюсь, это поможет!

$(document).ready(() => {

 $('.sub-ul').hide();
  
 $('.side-checkbox').each(function () {

    /* UPDATE: Here is the line that you need to update */
    var obj = $('+ .sub-ul', this);

    $(this).click(function () {
      if ($(this).is(':checked')) {
        obj.show(300);
      } else {
        obj.hide(200);
      }
    });
  });
});

a {
  text-decoration: none;
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="ul-nav">
  <li class="li-nav">
  
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
  <li class="li-nav">
    <a class="side-menu-checkbox" href="#">(A)Lorem</a>

    <input type="checkbox" name="a" id="a" class="side-checkbox">

    <ul class="ul-nav sub-ul">
      <li class="li-nav">
        <a href="#">(B)Ipsum</a>

        <input type="checkbox" name="a" id="b" class="side-checkbox">
        
        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="side-menu-plus">(B)Ipsum</a>

        <input type="checkbox" name="a" id="c" class="side-checkbox">
        

        <ul class="ul-list sub-ul">
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
          <li class="li-nav"><a href="#">(C)Dolorem</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="li-nav"><a href="#">(A)Lorem</a></li>
</ul>