jQuery定位嵌套列表

我想要实现的第一步是测试一个“li”是否嵌套了一个“ul”，如果是，在点击时显示嵌套的“ul”。这很好;然而，if语句对于每个“li”都返回true，而不仅仅是那些有孩子“ul”的那个。这意味着没有子菜单的链接不起作用，因为e.preventDefault（）被调用。jQuery定位嵌套列表

感谢您的帮助！

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

来源

2016-09-06 d.b

您正在错误地使用[jQuery has selector]（https://api.jquery.com/has/）。猜你想检查父母是否包含任何嵌套的UL？你必须解释你想要达到的行为：一旦你点击并切换子菜单，如果你点击其他链接或相同的链接会发生什么？你也在混合脚本和样式，添加样式，但隐藏元素......认为你开始总是错误的方式。 – skobaljic

可能重复[jQuery如果有（）选择器做东西]（http://stackoverflow.com/questions/16277484/jquery-if-has-selector-do-stuff） –

你有truthy值的问题被填充到您的条件。 has()不返回布尔值，它会根据指定的选择器返回一个过滤的jQuery集合。您可以使用length来调查收集的大小（可能为0）。

例子：

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

你可能，作为一种替代，考虑指定一个不同的类中使用强制执行这种行为也是如此。这将允许您仅在给定类的特定a标记上单击“覆盖”行为时附加此操作。这将比重复的DOM查询和遍历更好。

来源

2016-09-06 20:08:58

感谢您这样快速和正确的答案！我将.has（'ul'）更改为.has（'ul'）。length> 0，但.find方法也起作用。再次感谢！！ –

切换通过脚本子菜单中的基本方法是：

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

的jQuery has selector您尝试使用有别的事情要做：

说明：减少匹配元素的集合与那些匹配选择器或DOM元素的后代的匹配元素。

如果你想检查是否元素是一些ul父母，比你应该这样做：

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

针对您的特殊情况下，你可以使用：

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

来源

2016-09-06 20:12:02 skobaljic

jQuery定位嵌套列表

回答

相关问题