javascript - 使用 jQuery 向上滑动多个 <ul> 元素

Question

我正在尝试构建一个jquery语句，它将slideUp() all <ul>兄弟元素不包含一组特定类(.clicked、.chosen)的元素。

假设我有以下嵌套 <ul>结构:

<ul class="mainmenu">
    <li>Dogs</li>
    <ul>
        <li>Fido</li>
        <li class="chosen">Barney</li>
        <li>Turbo</li>
    </ul>
    <li>Cats</li>
    <ul>
        <li>Sylvester</li>
        <li>Felix</li>
        <li>Garfield</li>
    </ul>
    <li class="clicked">Hamsters</li>
    <ul>
        <li>Chubbs</li>
        <li>Oreo</li>
        <li>Ruby</li>
    </ul>
</ul>

对于上面的例子，我只想将'Cats'<ul>滑动()元素 ('Sylvester'、'Felix'、'Garfield')，因为它的元素都没有使用 'chosen' 或 'clicked' 类。

我当前的 jquery 语句如下:

$('.mainmenu').first().siblings().not('.clicked, .chosen').slideUp();

这个以及我尝试过的其他一切都没有返回任何结果。有建议吗？

Answer 1

您的 HTML 看起来很有挑战性:)但不知何故，我已经设法创建一个查询来执行您正在寻找的内容。

如果您想检查特定元素的多个类，您可以使用 is()也是如此。

//Check li doesn't have clicked class and then filter ul next to the li 
$('.mainmenu > li').not('.clicked').next('ul').filter(function(){
  //Find the ul, if it's any of li doesn't have chosen class 
  if(!$(this).find('li').hasClass('chosen'))
  {
    return $(this);
  }
}).slideUp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
    <li>Dogs</li>
    <ul>
        <li>Fido</li>
        <li class="chosen">Barney</li>
        <li>Turbo</li>
    </ul>
    <li>Cats</li>
    <ul>
        <li>Sylvester</li>
        <li>Felix</li>
        <li>Garfield</li>
    </ul>
    <li class="clicked">Hamsters</li>
    <ul>
        <li>Chubbs</li>
        <li>Oreo</li>
        <li>Ruby</li>
    </ul>
</ul>