第一段引用上面的摘要：
本文旨在提供一种简洁有效的方案，实现点击页面 body 区域时关闭下拉菜单的功能。我们将分析原生 JavaScript 实现方案中存在的问题，并介绍如何使用 jQuery 简化代码，实现更可靠的下拉菜单控制。通过本文，你将掌握一种常用的前端交互技巧，提升用户体验。
在 Web 开发中，下拉菜单是一种常见的交互元素。通常，我们希望用户在点击菜单以外的区域时，自动关闭下拉菜单。本文将探讨如何使用 JavaScript（包括原生 JavaScript 和 jQuery）来实现这一功能，并分析不同方案的优缺点。
原生 JavaScript 实现方案分析
最初的代码尝试使用 window.onclick 事件来检测点击事件，并移除 .menu 元素的 show 类。然而，这段代码存在一些问题，导致无法正常工作：
事件覆盖： window.onclick 会覆盖之前绑定的事件处理程序。如果页面上还有其他依赖 window.onclick 的代码，可能会导致冲突。逻辑错误： if (!(event.target == titleElem.nextElementSibling.classList.contains(‘show’))) 这段逻辑判断存在问题，它检查的是点击目标是否是 .dropdown–title 元素的下一个兄弟元素，并且这个兄弟元素是否包含 show 类。这并不能正确判断点击是否发生在下拉菜单之外。
使用 jQuery 实现更可靠的方案
jQuery 提供了一种更简洁、更可靠的方式来处理 DOM 事件。以下是使用 jQuery 实现点击 body 区域关闭下拉菜单的示例代码：
$(document).ready(function() { $(document).on('click', function(event) { if (!$(event.target).closest('.dropdown').length) { $('.categories.menu').removeClass('show'); } });});
代码解释：
$(document).ready(function() { … });：确保在 DOM 加载完成后执行代码。$(document).on(‘click’, function(event) { … });：将点击事件绑定到 document 对象上，利用事件委托机制，可以监听整个文档的点击事件。$(event.target).closest(‘.dropdown’).length：使用 closest() 方法查找点击目标及其父元素中是否存在 .dropdown 元素。如果存在，则返回一个包含该元素的 jQuery 对象，其 length 属性大于 0；否则，返回一个空 jQuery 对象，其 length 属性为 0。if (!$(event.target).closest(‘.dropdown’).length)：判断点击是否发生在 .dropdown 元素之外。$(‘.categories.menu’).removeClass(‘show’);：如果点击发生在 .dropdown 元素之外，则移除 .categories.menu 元素的 show 类，从而关闭下拉菜单。
完整 HTML 结构示例：
Choose category
CSS 样式（保持不变）：
.dropdown { position: relative;}.dropdown::before { content: "+"; position: absolute; width: 1.5rem; height: 1.5rem; top: 15px; right: 0; color: var(--cbl);}.dropdown .dropdown--title { padding: 0.75rem; width: 100%; cursor: pointer;}.dropdown .menu { cursor: pointer; max-height: 0; overflow: hidden; display: flex; flex-direction: column; position: absolute; z-index: 12; width: 100%; top: 45px; right: 0; background-color: var(--cwh); transition: max-height 0.3s; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; -ms-transition: max-height 0.3s; -o-transition: max-height 0.3s; box-shadow: 0 3px 20px #ccc; -webkit-box-shadow: 0 3px 20px #ccc; -moz-box-shadow: 0 3px 20px #ccc;}.dropdown .menu.show { max-height: 20em !important;}.dropdown .menu.show a { color: var(--cbl); opacity: 1; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transform: translateX(0); -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0);}.dropdown .menu a { padding: 1rem; opacity: 0; color: var(--cbl); transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%);}.dropdown .menu a:nth-child(1) { transition-delay: 0.2s;}.dropdown .menu a:nth-child(2) { transition-delay: 0.15s;}.dropdown .menu a:nth-child(3) { transition-delay: 0.1s;}.dropdown .menu a:nth-child(4) { transition-delay: 0.05s;}.dropdown .menu a:nth-child(5) { transition-delay: 0s;}.dropdown .menu a:not(:last-child) { border-bottom: 1px solid var(--cblo40);}.dropdown .menu a:hover { background: rgba(0, 0, 0, 0.2);}
注意事项
确保正确引入 jQuery 库。.dropdown 和 .categories.menu 类名需要与你的 HTML 结构保持一致。如果你的下拉菜单结构更复杂，可能需要调整 closest() 方法的选择器。使用事件委托可以提高性能，特别是在页面上有大量元素时。
总结
本文介绍了如何使用 jQuery 实现点击页面 body 区域时关闭下拉菜单的功能。 通过使用 closest() 方法，我们可以轻松判断点击是否发生在下拉菜单之外，并采取相应的操作。 这种方法简洁、可靠，并且易于维护。 在实际开发中，可以根据具体需求进行适当的调整和优化。
以上就是如何实现点击页面其他区域时关闭下拉菜单的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1573454.html
微信扫一扫 
支付宝扫一扫 
