jquery 如果单个元素不存在，如何对其他元素隐藏

Question

我正在处理带有（单个菜单）和（子菜单）的边栏。

包含（子菜单）的菜单有（+-）切换，单选的没有。

如何从其他类似元素中隐藏单个菜单的 (+-)。

这个方法我试过了，对所有人都隐藏了。

HTML

<div class="multitoggle">
    <ul id="accordions">
        <li class="nav-parents">
            <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">CURRENT ACCOUNTS</a></div>
            <ul class="submenu">
                <li><a href="../current/third-level.php">MPOWER CLASSIC</a></li>
                <li><a href="../current/third-level.php">MPOWER GOLD</a></li>
                <li><a href="../current/third-level.php">MPOWER PLATINUM</a></li>
            </ul>
        </li>
        <li class="nav-parents">
            <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">OUR SEGMENTS</a></div>
        </li>
    </ul>
</div>

JS

$(window ).load(function(e) {
    if ($('.nav-parents').has('submenu').length == 0) {
        $('.nav-parents').find('.plus, .minus').css('display', 'none');
    }
});

Answer 1

实际上只有has()在这种情况下不起作用。您必须使用 not() 和 has() 的组合。而且你错过了 submenu 之前的点。你可以像下面那样做。

$(window ).load(function(e) {
    $('.nav-parents').not(':has(.submenu)').find('.plus, .minus').css('display', 'none');
});

Answer 2

您可以在 css 中执行此操作，因为 div 将是 last-child 或 only-child（如果它没有子菜单）。所以你可以通过使用

来实现它

.nav-parents > div.link:last-child > span{
  display:none;
}

.nav-parents > div.link:last-child > span{
  display:none;
}

<div class="multitoggle">
                <ul id="accordions">
                    <li class="nav-parents">
                        <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">CURRENT ACCOUNTS</a></div>
                        <ul class="submenu">
                            <li><a href="../current/third-level.php">MPOWER CLASSIC</a></li>
                            <li><a href="../current/third-level.php">MPOWER GOLD</a></li>
                            <li><a href="../current/third-level.php">MPOWER PLATINUM</a></li>
                        </ul>
                    </li>
                    <li class="nav-parents">
                        <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">OUR SEGMENTS</a></div>
                    </li>
                </ul>
            </div>

Jquery方式：-

如果您仍想在 jquery 上执行此操作，您可以通过

轻松删除

$(window ).load(function(e) {
        $('.nav-parents > div.link:only-child > span').css('display', 'none');
});

$(window ).load(function(e) {
        $('.nav-parents > div.link:last-child > span').css('display', 'none');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multitoggle">
                <ul id="accordions">
                    <li class="nav-parents">
                        <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">CURRENT ACCOUNTS</a></div>
                        <ul class="submenu">
                            <li><a href="../current/third-level.php">MPOWER CLASSIC</a></li>
                            <li><a href="../current/third-level.php">MPOWER GOLD</a></li>
                            <li><a href="../current/third-level.php">MPOWER PLATINUM</a></li>
                        </ul>
                    </li>
                    <li class="nav-parents">
                        <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">OUR SEGMENTS</a></div>
                    </li>
                </ul>
            </div>

Answer 3

你的 if 语句在这里没有多大作用，因为当你运行这个：

$('.nav-parents').find('.plus, .minus').css('display', 'none');

它将再次 select 所有 .nav-parents 并隐藏它们的优点和缺点。

到 select 只有 nav-parents 没有子菜单，你应该使用这个 jQuery 代码：

$('.nav-parents').not(':has(.submenu)')

这是您的代码片段：

$(window).load(function(e) {
    $('.nav-parents')
      .not(':has(.submenu)')
      .find('.plus, .minus')
      .hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multitoggle">
  <ul id="accordions">
    <li class="nav-parents">
      <div class="link">
        <span class="plus">+</span>
        <span class="minus">-</span>
        <a href="#">CURRENT ACCOUNTS</a>
      </div>
      <ul class="submenu">
        <li>
          <a href="../current/third-level.php">MPOWER CLASSIC</a>
        </li>
        <li>
          <a href="../current/third-level.php">MPOWER GOLD</a>
        </li>
        <li>
          <a href="../current/third-level.php">MPOWER PLATINUM</a>
        </li>
      </ul>
    </li>
    <li class="nav-parents">
      <div class="link">
        <span class="plus">+</span>
        <span class="minus">-</span>
        <a href="#">OUR SEGMENTS</a>
      </div>
    </li>
  </ul>
</div>

jquery 如果单个元素不存在，如何对其他元素隐藏

jquery how to hide a single element from others if not exist

html

javascript

jquery

toggle

show-hide