jQuery 定位嵌套列表
jQuery targeting nested list
我首先要实现的是测试 "li" 是否嵌套了 "ul",如果是,则在单击时显示嵌套的 "ul"。这运作良好;但是,if 语句为每个 "li" 返回 true,而不仅仅是具有 child "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 -->
您遇到了将真实值填充到条件中的问题。 has()
不是 return 布尔值,它 return 是一个基于指定选择器的过滤 jQuery 集合。您可以使用 length
来调查集合的大小(可能为 0)。
示例:
if( $(this).parent().has('ul').length > 0 ) {
作为替代方案,您可以考虑指定一个不同的 class 来强制执行此行为。这将允许您仅在给定 class 的那些特定 a
标签上附加点击 "override" 行为。这将比重复 DOM 查询和遍历更好。
通过脚本切换子菜单的基本方法是:
$('a').on('click', function(e){
var thisLink = $(this);
var subMenu = thisLink.siblings('ul');
if( subMenu.length>0 ) {
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 有其他事情要做:
Description: Reduce the set of matched elements to those that have a
descendant that matches the selector or DOM element.
如果你想检查元素是否是某些 ul
的父元素,你应该这样做:
if( $element.find('ul').length>0 ) { .. do .. };
对于您的具体情况,您将使用:
if( $(this).parent().find('ul').length>0 ) { .. it has some nested list ..};
我首先要实现的是测试 "li" 是否嵌套了 "ul",如果是,则在单击时显示嵌套的 "ul"。这运作良好;但是,if 语句为每个 "li" 返回 true,而不仅仅是具有 child "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 -->
您遇到了将真实值填充到条件中的问题。 has()
不是 return 布尔值,它 return 是一个基于指定选择器的过滤 jQuery 集合。您可以使用 length
来调查集合的大小(可能为 0)。
示例:
if( $(this).parent().has('ul').length > 0 ) {
作为替代方案,您可以考虑指定一个不同的 class 来强制执行此行为。这将允许您仅在给定 class 的那些特定 a
标签上附加点击 "override" 行为。这将比重复 DOM 查询和遍历更好。
通过脚本切换子菜单的基本方法是:
$('a').on('click', function(e){
var thisLink = $(this);
var subMenu = thisLink.siblings('ul');
if( subMenu.length>0 ) {
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 有其他事情要做:
Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.
如果你想检查元素是否是某些 ul
的父元素,你应该这样做:
if( $element.find('ul').length>0 ) { .. do .. };
对于您的具体情况,您将使用:
if( $(this).parent().find('ul').length>0 ) { .. it has some nested list ..};