Question

所以我对jquery一无所知。我试图让这段代码长期工作。我不明白问题所在。

以下是我的HTML代码：

    <ul class="accordion">
<li>
   <div> <input type="checkbox" /><a href="#">Administration</a></div>
    <ul class="accordion">
        <li>
            <div><input type="checkbox" /><a href="#">President</a></div>
            <ul class="accordion">
                <li>
                 <div>   <input type="checkbox" /><a href="#">Manager 1</a></div>
                    <ul class="accordion">
                        <li>
                      <div>      <input type="checkbox" /><a href="#">Assistant Manager 1</a></div></li>
                        <li>
                        <div>    <input type="checkbox" /><a href="#">Assistant Manager 2</a></div></li>
                        <li>
                        <div>    <input type="checkbox" /><a href="#">Assistant Manager 3</a></div></li>
                    </ul>
                </li>
                <li>
                  <div>  <input type="checkbox" />Manager 2</div></li>
                <li>
                 <div>   <input type="checkbox" />Manager 3</div></li>
            </ul>
        </li>

    </ul>
</li>

以下是我的jquerycode：

$(".accordion > li > div").click(function () {
 $('.active').not(this).removeClass('active').next().slideUp(300);              
  $(this).toggleClass('active');
            if (false == $(this).next().is(':visible')) {
              $('.accordion > ul').slideUp(300);
            }
            $(this).next().slideToggle(300);
          });
$('li :checkbox').on('click', function () {
   var $chk = $(this),
    $li = $chk.closest('li'),
    $ul, $parent;
  if ($li.has('ul')) {
    $li.find(':checkbox').not(this).prop('checked', this.checked);


}
do {
    $ul = $li.parent();
    $parent = $ul.siblings(':checkbox');
    if ($chk.is(':checked')) {
        $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
    } else {
        $parent.prop('checked', false)
    }
    $chk = $parent;
    $li = $chk.closest('li');
} while ($ul.is(':not(.someclass)'));
});

我从小提琴中得到了这个例子，单击父复选框将检查所有子框。我想要完全相同的东西，但是在手风琴中。手风琴正在切换，但是当我点击父复选框时，整个儿童手风琴都会折叠。我希望只有当点击手风琴标题时，手风琴才会崩溃。如果选中该复选框，手风琴仍应保持打开状态，但应检查子元素。

非常感谢任何帮助。谢谢！

Answer 1

您可以检查输入元素中是否发生了单击，如果是，则不执行任何操作

$(".accordion > li > div").click(function(e) {
  if ($(e.target).is('input')) { //if clicked on input element don't do anything
    return
  }
  $('.active').not(this).removeClass('active').next().slideUp(300);
  $(this).toggleClass('active');
  if (false == $(this).next().is(':visible')) {
    $('.accordion > ul').slideUp(300);
  }
  $(this).next().slideToggle(300);
});
$('li :checkbox').on('click', function() {
  var $chk = $(this),
    $li = $chk.closest('li'),
    $ul, $parent;
  if ($li.has('ul')) {
    $li.find(':checkbox').not(this).prop('checked', this.checked);


  }
  do {
    $ul = $li.parent();
    $parent = $ul.siblings(':checkbox');
    if ($chk.is(':checked')) {
      $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
    } else {
      $parent.prop('checked', false)
    }
    $chk = $parent;
    $li = $chk.closest('li');
  } while ($ul.is(':not(.someclass)'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <div>
      <input type="checkbox" /><a href="#">Administration</a>
    </div>
    <ul class="accordion">
      <li>
        <div>
          <input type="checkbox" /><a href="#">President</a>
        </div>
        <ul class="accordion">
          <li>
            <div>
              <input type="checkbox" /><a href="#">Manager 1</a>
            </div>
            <ul class="accordion">
              <li>
                <div>
                  <input type="checkbox" /><a href="#">Assistant Manager 1</a>
                </div>
              </li>
              <li>
                <div>
                  <input type="checkbox" /><a href="#">Assistant Manager 2</a>
                </div>
              </li>
              <li>
                <div>
                  <input type="checkbox" /><a href="#">Assistant Manager 3</a>
                </div>
              </li>
            </ul>
          </li>
          <li>
            <div>
              <input type="checkbox" />Manager 2</div>
          </li>
          <li>
            <div>
              <input type="checkbox" />Manager 3</div>
          </li>
        </ul>
      </li>

    </ul>
  </li>
  <li>
    <div>
      <input type="checkbox" /><a href="#">Administration</a>
    </div>
    <ul class="accordion">
      <li>
        <div>
          <input type="checkbox" /><a href="#">President</a>
        </div>
        <ul class="accordion">
          <li>
            <div>
              <input type="checkbox" /><a href="#">Manager 1</a>
            </div>
            <ul class="accordion">
              <li>
                <div>
                  <input type="checkbox" /><a href="#">Assistant Manager 1</a>
                </div>
              </li>
              <li>
                <div>
                  <input type="checkbox" /><a href="#">Assistant Manager 2</a>
                </div>
              </li>
              <li>
                <div>
                  <input type="checkbox" /><a href="#">Assistant Manager 3</a>
                </div>
              </li>
            </ul>
          </li>
          <li>
            <div>
              <input type="checkbox" />Manager 2</div>
          </li>
          <li>
            <div>
              <input type="checkbox" />Manager 3</div>
          </li>
        </ul>
      </li>

    </ul>
  </li>
</ul>

Answer 2

你可以添加

if( $('your_checkbox').is(':checked') ){
    // No slideToggle
} else {
   // slideToggle
}

选中复选框后停止手风琴切换

2 个答案: