jQuery ciblant la liste imbriquée

Question

Ce que j'essaie de réaliser d'abord, c'est de tester si un «ul» est imbriqué dans «li» et, si c'est le cas, d'afficher le «ul» imbriqué lors du clic. cela fonctionne bien; TOUTEFOIS, l'instruction if renvoie true pour chaque "li" et pas seulement pour ceux qui ont un enfant "ul". cela signifie que les liens sans sous-menus ne fonctionnent pas, puisque e.preventDefault() est invoqué.

Merci pour votre aide!

$('.main_nav').on('click', 'a', function(e) { 
 
\t \t if($(this).parent().has('ul')) { 
 
\t \t \t e.preventDefault(); 
 
\t \t \t $(this).parent().children('ul').toggle(800, 'easeOutQuint', function() { 
 
\t \t \t \t $(this).closest('li').toggleClass('open dropdown'); 
 
    \t \t }).closest('li').siblings('.open').toggleClass('open dropdown').children('ul').hide('fast'); 
 
\t \t } 
 
\t });

<nav class="main_nav" role="navigation" aria-label="Primary Menu"> 
 
     <ul id="menu-main" class="menu"><li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-7"><a href="http://projectbiketech.dev/">Home</a></li> 
 
<li id="menu-item-22" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://projectbiketech.dev/about/">About</a> 
 
<ul class="sub-menu"> 
 
\t <li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://projectbiketech.dev/about/team/">Team</a></li> 
 
\t <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://projectbiketech.dev/about/board-of-directors/">Board of Directors</a></li> 
 
\t <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://projectbiketech.dev/about/advisory-board/">Advisory Board</a></li> 
 
\t <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://projectbiketech.dev/about/friends-of-pbt/">Friends of PBT</a></li> 
 
</ul> 
 
</li> 
 
<li id="menu-item-25" class="dropdown menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://projectbiketech.dev/programs/">Programs</a> 
 
<ul class="sub-menu"> 
 
\t <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://projectbiketech.dev/programs/bike-tech-in-school/">Bike Tech In School</a></li> 
 
</ul> 
 
</li> 
 
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://projectbiketech.dev/chapters/">Chapters</a></li> 
 
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://projectbiketech.dev/media/">Media</a></li> 
 
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://projectbiketech.dev/support/">Support</a></li> 
 
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://projectbiketech.dev/contact/">Contact</a></li> 
 
</ul> </nav><!-- .main_navigation -->

Answer 1

Vous avez le problème d'une valeur truthy renseignées dans vos conditions. has() ne renvoie pas de valeur booléenne, il renvoie une collection jQuery filtrée basée sur le sélecteur spécifié. Vous pouvez utiliser length pour rechercher la taille de la collection (qui peut être 0).

Exemple:

if($(this).parent().has('ul').length > 0) { 

Vous pourriez, comme une alternative, envisager de spécifier une autre classe à utiliser pour appliquer ce comportement aussi bien. Cela vous permettrait d'attacher seulement ce comportement sur le clic "override" sur ces balises a particulières de la classe donnée. Cela fonctionnerait mieux que les requêtes DOM répétées et la traversée.

Answer 2

La méthode de base pour activer le sous-menu via le script serait:

$('a').on('click', function(e){ 
 
    var thisLink = $(this); 
 
    var subMenu = thisLink.siblings('ul'); 
 
    if(subMenu.length>0) { 
 
    \t subMenu.slideToggle(); 
 
     return false; 
 
    }; 
 
});

ul ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a> 
 
     <ul> 
 
      <li><a href="#">Team</a></li> 
 
      <li><a href="#">Directors</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Programs</a> 
 
     <ul> 
 
      <li><a href="#">Subitem 1</a></li> 
 
      <li><a href="#">Subitem 2</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>

Le jQuery has selector que vous avez essayé d'utiliser a autre chose à faire:

Description: Réduire la ensemble d'éléments correspondants à ceux qui ont un descendant qui correspond au sélecteur ou à l'élément DOM.

Si vous voulez vérifier si l'élément est un parent de certains ul, que vous devriez le faire de cette façon:

if($element.find('ul').length>0) { .. do .. }; 

Pour votre cas, vous devez utiliser:

if($(this).parent().find('ul').length>0) { .. it has some nested list ..};