jQuery 目标嵌套列表-解网

问：

我首先试图实现的是测试“li”是否嵌套了“ul”，如果是这样，则在单击时显示嵌套的“ul”。这运作良好;但是，对于每个“li”，if 语句返回 true，而不仅仅是具有子“ul”的语句。这意味着没有子菜单的链接不起作用，因为 e.preventDefault（）被调用。

感谢您的帮助！

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

 <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">
	<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>
	<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>
	<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>
	<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">
	<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 -->

jquery jquery-selectors 嵌套列表 jquery-events dom-node

您错误地使用了jQuery选择器。猜猜您想检查父级是否包含任何嵌套的 UL？你必须解释你想要实现什么行为：一旦你点击并切换子菜单，如果你点击其他链接或同一个链接会发生什么？您还混合了脚本和样式，添加了样式，但隐藏了元素......认为你一开始就错了。

0赞 Heretic Monkey 9/7/2016

如果 has（）选择器做事，则可能重复 jQuery

答：

0赞 Mike Brant 9/7/2016 #1

你有一个问题，即一个真实值被填充到你的条件中。不返回布尔值，它返回基于指定的选择器的筛选 jQuery 集合。可用于调查集合的大小（可能为 0）。has()length

例：

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

或者，也可以考虑指定一个不同的类来强制执行此行为。这将允许您仅在给定类的那些特定标签上的单击“覆盖”行为上附加此内容。这将比重复的 DOM 查询和遍历性能更好。a

<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具有选择器还有其他操作：

说明：将匹配元素集减少到具有与选择器或 DOM 元素匹配的后代。

如果你想检查元素是否是某些元素的父元素，那么你应该这样做：ul

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

对于您的具体情况，您将使用：

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

上一个：Bootstrap tab.js 中的嵌套列表 [活动类未删除]

下一个：如何用css美化这个嵌套列表？

jQuery 目标嵌套列表

jQuery targeting nested list

评论

评论