JavaScript点击导航(多层） - 如何分离父点击和子点击

javascript onclick navigation (multiple layers) - how do I separate parent and child click?

本文关键字：分离 导航 多层 JavaScript 何分离      更新时间：2023-09-26

http://jsfiddle.net/kGw8y/1602/

$('#global-nav li:has(ul)').click(function(){
    $(this).find('> ul').stop().slideToggle(400); 
});

我发现这是最初使用悬停的; 但是，我将其修改为单击。 如果您查看代码，子"站点"在其下也有链接，但是当您单击"站点"时，它也会激活主导航关闭它。

如何将"父级"

点击与"子级"点击区分开来？ 我希望这是一个简单的代码，可以在多层下工作，而无需添加越来越多的代码。

另外，我将如何在此代码中添加一个元素，如果顶层"child"在其下有链接，它会添加一个箭头（仍在黑色区域），单击时，箭头将旋转到向下位置。 然后，如果未选中，箭头将指向右侧。

感谢您的帮助。

编辑

如何使它适用于菜单按钮下拉导航的导航之外的按钮？

法典：

<a id="menu_button" class="hidecontent_full hidecontent_condensed" href="#">Menu</a>
<div class="nav">
<ul>
<li class="first"><a href="#">New?</a>
    <ul>
    <li><a href="welcome.php">Welcome</a></li>
    <li><a href="whoweare.php">Who We Are</a></li>
    <li><a href="whatwebelieve.php">What We Believe</a></li>
    <li><a href="whenandwhere.php">When and Where</a></li>
    <li><a href="staff.php">Crossroads Staff</a></li>
    <li><a href="contact.php">Contact</a></li>
    </ul>
</li>
<li><a href="#">Next Steps</a>
    <ul>
    <li><a href="nextsteps.php">What is Next Steps?</a></li>
    <li><a href="connect.php">Connect</a></li>
    <li><a href="grow.php">Grow</a></li>
    <li><a href="serve.php">Serve</a></li>
    </ul>
</li>
<li><a href="#">Ministries</a>
    <ul>
    <li><a href="kidz.php">Childrens Ministry</a></li>
    <li><a href="fused.php">Student Ministry</a></li>
    <li><a href="connectgroups.php">Connect Groups</a>
    <li><a href="musicministry.php">Music Ministry</a></li>
    <li><a href="prayerrequests.php">Prayer Requests</a></li>
    </ul>
</li>
<li><a href="#">Resources</a>
    <ul>
    <li><a href="sermonarchives.php">Sermon Archives</a></li>
    <li><a href="ccb.php">Church Community Builder</a></li>
    <li><a href="parents.php">Parents</a></li>
    <li><a href="Biblereadingplans.php">Bible Reading Plans</a></li>
    <li><a href="recommendedbooks.php">Recommended Books</a></li>
    </ul>
</li>
<li class="last"><a href="#">Events</a>
    <ul>
    <li><a href="merge.php">Merge</a></li>
    <li><a href="Christmasonthefarm.php">Christmas on the Farm</a></li>
    <li><a href="lovecamedown.php">Love Came Down</a></li>
    <li><a href="dinnerfor8.php">Dinner for 8</a></li>
    <li><a href="calendarofevents.php">Calendar of Events</a></li>
    </ul>
</li>
<li><a href="#">Give</a>
    <ul>
    <li><a href="howtogive.php">How to Give</a></li>
    </ul>
</li>
</ul>
</div>  <!-- navigation -->

返回 false 可以防止事件通过 dom 冒泡并触发其他选定的元素。

编辑二

不过，代码实际上是相同的：

最后的小提琴

新吉斯菲德尔

旧吉斯菲德尔

.js

$('#global-nav li:has(ul)').click(function(){
    $(this).find('> ul').slideToggle(400);
});
$('#menu_button').on('click', function() {
  $(this).toggleClass('open');
});

.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#menu_button {
    display: inline-block;
    padding: 15px;
    width:200px;
    background:#444;
    color: white;
}
#global_nav {
    display: none;
}
.open ~ #global-nav {
    display: block;
    width:200px;
    background:#444;
}
#global-nav li a{
    padding:15px;
}
#global-nav a{
    display:block;
    color:#fff;
}
#global-nav ul ul{
    display:none;
    background:#000;
}
#global-nav ul ul a:hover{
    background:#222;
}

.html

<a id="menu_button" class="hidecontent_full hidecontent_condensed" href="#">Menu</a>
<div id="global-nav">
<ul>
<li class="first"><a href="#">New?</a>
    <ul>
    <li><a href="welcome.php">Welcome</a></li>
    <li><a href="whoweare.php">Who We Are</a></li>
    <li><a href="whatwebelieve.php">What We Believe</a></li>
    <li><a href="whenandwhere.php">When and Where</a></li>
    <li><a href="staff.php">Crossroads Staff</a></li>
    <li><a href="contact.php">Contact</a></li>
    </ul>
</li>
<li><a href="#">Next Steps</a>
    <ul>
    <li><a href="nextsteps.php">What is Next Steps?</a></li>
    <li><a href="connect.php">Connect</a></li>
    <li><a href="grow.php">Grow</a></li>
    <li><a href="serve.php">Serve</a></li>
    </ul>
</li>
<li><a href="#">Ministries</a>
    <ul>
    <li><a href="kidz.php">Childrens Ministry</a></li>
    <li><a href="fused.php">Student Ministry</a></li>
    <li><a href="connectgroups.php">Connect Groups</a>
    <li><a href="musicministry.php">Music Ministry</a></li>
    <li><a href="prayerrequests.php">Prayer Requests</a></li>
    </ul>
</li>
<li><a href="#">Resources</a>
    <ul>
    <li><a href="sermonarchives.php">Sermon Archives</a></li>
    <li><a href="ccb.php">Church Community Builder</a></li>
    <li><a href="parents.php">Parents</a></li>
    <li><a href="Biblereadingplans.php">Bible Reading Plans</a></li>
    <li><a href="recommendedbooks.php">Recommended Books</a></li>
    </ul>
</li>
<li class="last"><a href="#">Events</a>
    <ul>
    <li><a href="merge.php">Merge</a></li>
    <li><a href="Christmasonthefarm.php">Christmas on the Farm</a></li>
    <li><a href="lovecamedown.php">Love Came Down</a></li>
    <li><a href="dinnerfor8.php">Dinner for 8</a></li>
    <li><a href="calendarofevents.php">Calendar of Events</a></li>
    </ul>
</li>
<li><a href="#">Give</a>
    <ul>
    <li><a href="howtogive.php">How to Give</a></li>
    </ul>
</li>
</ul>
</div>  <!-- navigation -->
您需要

在点击中event.stopPropagation()：

$('#global-nav li:has(ul)').click(function(e){
    e.stopPropagation(); // it stops the event to bubble up to the parent elems
    $(this).find('> ul').stop().slideToggle(400); 
});
相关文章：