jQuery - 打开新组时关闭其他组

Question

请你帮我完成这项工作，我正在努力做的就是这个。

此时单击一个组时，新组打开，而已经打开的组保持打开状态。

我想关闭所有其他的，只打开事件组。

示例如下:

var accordionsMenu = $('.cd-accordion-menu');

if (accordionsMenu.length > 0) {

  accordionsMenu.each(function() {
    var accordion = $(this);
    accordion.on('change', 'input[type="checkbox"]', function() {
      var checkbox = $(this);
      (checkbox.prop('checked')) ? checkbox.siblings('ul').attr('style', 'display:none;').slideDown(300): checkbox.siblings('ul').attr('style', 'display:block;').slideUp(300);
    });
  });
}

<h1>Multi-Level Accordion Menu</h1>

<ul class="cd-accordion-menu animated">
  <li class="has-children">
    <input type="checkbox" name="group-1" id="group-1">
    <label for="group-1">Group 1</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-1" id="sub-group-1">
        <label for="sub-group-1">Sub Group 1</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li class="has-children">
        <input type="checkbox" name="sub-group-2" id="sub-group-2">
        <label for="sub-group-2">Sub Group 2</label>

        <ul>
          <li class="has-children">
            <input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
            <label for="sub-group-level-3">Sub Group Level 3</label>

            <ul>
              <li><a href="#0">Image</a></li>
              <li><a href="#0">Image</a></li>
            </ul>
          </li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-2" id="group-2">
    <label for="group-2">Group 2</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-3" id="group-3">
    <label for="group-3">Group 3</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-4" id="group-4">
    <label for="group-4">Group 4</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-3" id="sub-group-3">
        <label for="sub-group-3">Sub Group 3</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>
</ul>
<!-- cd-accordion-menu -->

更新:WORKING VERSION HERE

来源:@jeto

Answer 1

使用你的 fiddle 中的 HTML，像这样的东西应该可以工作:

$(function() {
  $('.cd-accordion-menu input[type="checkbox"]')
    .on('change', function(e) {
      // Retrieve the sibling <li>'s
      var $sameLevelSiblings = $(this).closest('li').siblings();

      // Uncheck the corresponding checkboxes and hide the items
      $sameLevelSiblings.find('input[type="checkbox"]').prop('checked', false);
      $sameLevelSiblings.find('ul').slideUp(300);

      // Display or hide the current items depending on checkbox state
      if ($(this).is(':checked')) {
        $(this).siblings('ul').slideDown(300);
      } else {
        $(this).siblings('ul').slideUp(300);
      }
    })
    // Hide all items on load
    .siblings('ul').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Multi-Level Accordion Menu</h1>

<ul class="cd-accordion-menu animated">
  <li class="has-children">
    <input type="checkbox" name="group-1" id="group-1">
    <label for="group-1">Group 1</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-1" id="sub-group-1">
        <label for="sub-group-1">Sub Group 1</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li class="has-children">
        <input type="checkbox" name="sub-group-2" id="sub-group-2">
        <label for="sub-group-2">Sub Group 2</label>

        <ul>
          <li class="has-children">
            <input type="checkbox" name="sub-group-level-3" id="sub-group-level-3">
            <label for="sub-group-level-3">Sub Group Level 3</label>

            <ul>
              <li><a href="#0">Image</a></li>
              <li><a href="#0">Image</a></li>
            </ul>
          </li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-2" id="group-2">
    <label for="group-2">Group 2</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-3" id="group-3">
    <label for="group-3">Group 3</label>

    <ul>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>

  <li class="has-children">
    <input type="checkbox" name="group-4" id="group-4">
    <label for="group-4">Group 4</label>

    <ul>
      <li class="has-children">
        <input type="checkbox" name="sub-group-3" id="sub-group-3">
        <label for="sub-group-3">Sub Group 3</label>

        <ul>
          <li><a href="#0">Image</a></li>
          <li><a href="#0">Image</a></li>
        </ul>
      </li>
      <li><a href="#0">Image</a></li>
      <li><a href="#0">Image</a></li>
    </ul>
  </li>
</ul>
<!-- cd-accordion-menu -->

注意:对选择器使用 HTML 元素/属性是不好的做法，我建议改用 data- 属性。