jquery如果不存在如何隐藏其他元素答案

【问题标题】：jquery how to hide a single element from others if not existjquery如果不存在如何隐藏其他元素
【发布时间】：2016-12-04 17:17:32
【问题描述】：

我正在使用（单个菜单）和（子菜单）的侧边栏。

包含 (submenu) 的菜单有 (+-) 切换，而包含单项的菜单什么都没有。

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

我试过这种方式，它对所有人都隐藏。

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>

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

【问题讨论】：

为什么不直接从没有子菜单的菜单中删除 spans 元素？
它正在被集成到 Kentico cms 中，CMS 默认将所有侧边栏视为相同。所以它默认添加（+-）。这就是为什么我需要为此编写一个自定义脚本
@SowemimoBamidele 您的代码确实有效，您只是在子菜单中忘记了.，因为您正在寻找一个类而不是元素，Azim 是一行，但更难阅读。
没有。只有点不会使它工作。 @YanMayatskiy
@Azim 你是对的，很确定他在循环。

标签： javascript jquery html toggle show-hide

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你的 if 语句在这里没有做太多，因为当你运行这个时：

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

它会再次选择所有.nav-parents 并隐藏它们的优缺点。

要仅选择没有子菜单的导航父级，您应该使用以下 jQuery 代码：

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

这是您在 sn-p 中工作的代码：

$(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>

【讨论】：

【解决方案3】：

您可以在 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>

【讨论】：

我认为这只是一个例子，他的菜单可能没有子菜单并且没有最后一个。