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），选择直接跟在这个.side-checkbox之后的.sub-ul兄弟

这是一个工作代码 sn-p - 希望对您有所帮助！

$(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>