Javascript JQuery 使用复选框切换嵌套元素

Question

我目前无法访问我的列表子类。这个想法是创建多级展开列表，其中复选框用作按钮。现在这一切 folds/unfolds 同时进行，我们希望元素通过 checking/unchecking 它的父元素展开。

我知道我可以通过单击这些元素来使用 less/sass 到 hide/show，但我想了解如何使用 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 列表实例的快捷方式。

实际上，此更改的意思是：

for the current .side-checkbox that is clicked (ie this), select the .sub-ul sibling that directly follows this .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>

Javascript JQuery 使用复选框切换嵌套元素

Javascript JQuery toggle nested elements with checkbox

javascript

checkbox

jquery

toggle