jquery如何隱藏從其他人的單個元素，如果不存在

我正在側欄（單一菜單）和（子菜單）。jquery如何隱藏從其他人的單個元素，如果不存在

包含（子菜單）的菜單具有（+ - ）切換，而具有選項的菜單沒有任何內容。

如何隱藏其他類似元素的（+ - ）單個菜單。

我試過這種方式，它隱藏所有的人。

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'); 
    } 
});

來源

2016-12-04 Sowemimo Bamidele

爲什麼不直接從菜單中刪除沒有子菜單的跨度元素？ –

它被集成到Kentico cms中，並且CMS在默認情況下將所有側邊欄視爲相同。所以它默認添加（+ - ）。這就是爲什麼我需要爲你的代碼實際工作而編寫一個自定義腳本 –

@SowemimoBamidele，你只是在子菜單中忘了'.'，因爲你正在尋找一個類而不是元素，Azim是一條線，但更難讀。 –

其實只有has()不會在這種情況下工作。您必須使用not()和has()的組合。而且你還錯過了submenu之前的點。你可以像下面這樣做。

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

來源

2016-12-04 17:25:35 Azim

您可以在CSS做它本身的股利將是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>

來源

2016-12-04 17:34:43 jafarbtech

我認爲這只是一個例子，他可能有菜單沒有子菜單，沒有最後。 –

你如果因爲當你運行該聲明並沒有做很多在這裏：

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

它只會選擇所有.nav-parents一次隱藏自己的長處和短處。

要無子菜單中選擇只有NAV-父母，你應該使用這個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>

來源

2016-12-04 17:38:57 Punit

jquery如何隱藏從其他人的單個元素，如果不存在

回答

相關問題