点开下拉菜单之后,点击任何一个位置和下拉菜单中的按钮都可以关闭下拉菜单的jquery代码
时间: 2024-05-13 18:14:01 浏览: 63
jQuery下拉菜单分类搜索框代码_drop_jQuery下拉菜单分类搜索框代码_
以下是一个基本的 jQuery 代码示例,可以实现点击下拉菜单之外的任何地方或点击菜单中的按钮时关闭下拉菜单:
```javascript
$(document).on('click', function (event) {
var $dropdown = $('.dropdown');
if (!$dropdown.is(event.target) && $dropdown.has(event.target).length === 0) {
$dropdown.removeClass('active');
}
});
$('.dropdown-btn').on('click', function () {
$('.dropdown').toggleClass('active');
});
```
上述代码中,我们首先使用 `$(document).on('click')` 绑定了一个事件监听器,当用户点击文档中的任何元素时,都会执行一段代码。我们使用 `$dropdown.is(event.target)` 判断点击事件是否发生在下拉菜单内,如果不是就关闭菜单,使用 `$dropdown.has(event.target).length === 0` 判断点击事件是否发生在下拉菜单内的子元素内,如果不是也关闭菜单。
另外,我们使用 `$('.dropdown-btn').on('click')` 绑定了一个点击事件监听器,当用户点击下拉菜单按钮时,会切换菜单的 `active` 类,以显示或隐藏下拉菜单。请注意,这里的 `.dropdown` 和 `.dropdown-btn` 类名需要根据你的 HTML 结构进行修改,以确保代码正确工作。
阅读全文