jQuery选择除self之外的所有兄弟姐妹和孩子

Posted 2023-02-25

【中文标题】jQuery选择除self之外的所有兄弟姐妹和孩子

【英文标题】：jQuery select all siblings & children except self

【发布时间】：2015-06-30 05:11:36

【问题描述】：

我想要做的是复制一个手风琴类型的 jQuery 小部件

我有以下代码：

$('a').on('click', function (e) 
  var active = $(this).parent().next();
  active.toggleClass('active');
  active.siblings().not(active).removeClass('active');
  e.preventDefault();
);

虽然 active.siblings().not(active).removeClass('active');不工作 我希望它怎么做我基本上希望它选择所有兄弟姐妹 UL 标记和兄弟姐妹的任何子 UL 标记，但排除 Active/Current 选择。

我以这个小提琴为例 http://jsfiddle.net/7u3pw1hz/

【参考方案1】：

问题是，其他ul元素不是兄弟元素，它们是当前li的兄弟元素li的子元素

$('a').on('click', function(e) 
  var active = $(this).parent().next();
  active.toggleClass('active');
  active.parent().siblings().children('ul').removeClass('active');
  active.find('ul').removeClass('active');
  e.preventDefault();
);

ul ul.active 
  max-height: 800px;

ul ul 
  max-height: 0;
  overflow: hidden;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><span><a href="category.html">Shop</a> <i class="icon-expand_more"></i></span>
    <ul class="active">
      <li>
        <span><a href="category.html">Sleeping Bags</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="category.html">Medium Sleeping Bags</a></li>
          <li><a href="category.html">Winter Sleeping Bags</a></li>
          <li><a href="category.html">Summer Sleeping Bags</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Swaddles</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Linen</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Clothing</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">My Room</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Tool Box</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Wellbeing</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Feed</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Bath</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Carriers</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
      <li>
        <span><a href="category.html">Gifts</a> <i class="icon-expand_more"></i></span>
        <ul class="menu">
          <li><a href="/shop/wraps/fitted-wraps">Fitted Wraps</a></li>
          <li><a href="/shop/wraps/merino-wraps">Merino Wraps</a></li>
          <li><a href="/shop/wraps/muslin-wraps">Muslin Wraps</a></li>
          <li><a href="/shop/wraps/stretch-cotton">Stretch Cotton</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><span><a href="category.html">Brands</a></span></li>
</ul>