2016-12-04 2 views
0

Я работаю над боковой панелью с одним меню и (подменю).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> 

JS

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

почему бы вам просто не удалять элементы пролетов из меню, у которых нет подменю? –

+0

Он интегрируется в Kentico cms, и CMS видит все боковые панели одинаковыми по умолчанию. Поэтому он добавляет (+ -) по умолчанию. Вот почему мне нужно написать собственный скрипт для этого –

+0

@SowemimoBamidele, который ваш код действительно работал, вы просто забыли '.' в подменю, потому что вы искали класс, а не элемент, Azim - одна строка, но сложнее читать. –

ответ

1

На самом деле только has() не будет работать в этом случае. Вы должны использовать комбинацию not() и has(). А также вы пропустили точку до submenu. Вы можете сделать это следующим образом.

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

Вы можете сделать это в 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>

+0

Я думаю, что это всего лишь пример, у него могут быть меню, у которых нет подменю и не последнее. –

1

Ваше заявление, если не делать здесь, потому что, когда вы запустите это:

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

это будет просто выбрать все .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>

Смежные вопросы