jquery点击非菜单处隐藏

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，你可以轻松地实现复杂的 JavaScript 功能。

类型

jQuery 的事件处理主要分为以下几种类型：

鼠标事件：如 click、mouseover、mouseout 等。
键盘事件：如 keydown、keyup、keypress 等。
表单事件：如 submit、change、focus、blur 等。
文档/窗口事件：如 load、unload、resize、scroll 等。

应用场景

在网页开发中，jQuery 经常用于实现交互效果，如：

动态加载内容
表单验证
图片轮播
弹出菜单

问题描述及解决方案

问题描述

点击非菜单处隐藏菜单。

原因

当点击菜单以外的区域时，菜单没有隐藏，可能是因为没有正确绑定点击事件或者没有正确处理事件冒泡。

解决方案

可以通过以下步骤实现点击非菜单处隐藏菜单：

绑定点击事件：给整个文档绑定点击事件。
阻止事件冒泡：在菜单内部的点击事件中阻止事件冒泡。
隐藏菜单：在文档的点击事件中判断点击的目标是否是菜单或其子元素，如果不是，则隐藏菜单。

以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Click Outside Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #menu {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button id="menu-toggle">Toggle Menu</button>
    <div id="menu">
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            $('#menu-toggle').click(function(event) {
                event.stopPropagation();
                $('#menu').toggle();
            });

            $(document).click(function(event) {
                if (!$(event.target).closest('#menu').length && !$(event.target).is('#menu-toggle')) {
                    $('#menu').hide();
                }
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：包含一个按钮和一个菜单。
CSS 样式：设置菜单的初始状态为隐藏。
JavaScript 代码：
- 给按钮绑定点击事件，切换菜单的显示状态，并阻止事件冒泡。
- 给文档绑定点击事件，判断点击的目标是否是菜单或其子元素，如果不是，则隐藏菜单。

通过这种方式，可以实现点击非菜单处隐藏菜单的功能。

页面内容是否对你有帮助？

有帮助

没帮助

jquery live()函数和AJAX加载内容的问题

、、、

对于我正在实现的交互设计技巧，我对jquery有一个小问题。当用户点击链接时，我有一个链接和一个隐藏的下拉菜单来显示。我希望下拉菜单隐藏，如果用户点击了链接或菜单。如果我在非AJAX重新加载的容器上执行此操作，则一切正常，但如果它是动态加载的内容，则不会立即起作用(下拉菜单显示，但如果单击外部，则不会隐藏)。

浏览 0提问于2011-05-19得票数 2

1回答

jquery切换以显示响应式设计中的隐藏元素

、、

我使用CSS来显示和隐藏某些断点处的元素。我还使用jquery切换来显示/隐藏元素。如果我将浏览器的大小调整到移动设备的大小，一切都会正常工作，但是当我将浏览器的大小调整到更大时，我使用Jquery隐藏的元素就会隐藏起来，在我的网页上留下空白。例如，我使用CSS为平板电脑或移动设备隐藏了一个菜单div，并使用CSS而不是菜单来显示菜单图标。然后，我使用Jquery在图标被

浏览 2提问于2013-03-30得票数 0

回答已采纳

2回答

取消激活按钮时，Jquery从上到下滑动，从下到上滑动

、、

我被jquery下拉菜单隐藏并显示了，请查看下面的链接，在这里请点击作业选项卡，然后点击任意子菜单按钮，它将显示超级子菜单，然后请点击“-”按钮，你可以看到超级子菜单不会从下到上隐藏，而是从右到左隐藏。我看着超级子菜单从下到上隐藏在点击“-”按钮选项卡，请指教？注意:需要在jsbin中开启自动运行JS，否则下拉不会开启...

浏览 2提问于2014-05-22得票数 0

1回答

触发select jQuery事件后隐藏手机键盘

、、

在我的小站点()上，我有一个jQuery自动完成和侧菜单的搜索输入。自动完成和菜单都使用选择事件来使用AJAX交付内容。我在堆栈溢出上寻找答案，但没有找到合适的jQuery回旋处。

浏览 1提问于2014-05-18得票数 3

回答已采纳

1回答

我正在努力让一个css菜单在iOS上关闭。菜单使用:hover显示，因此div设置为block并显示在屏幕上。这在iOS上显示得很好，所以菜单会显示出来，但如果您单击菜单，只是进入空白处，菜单仍将保留。似乎没有办法隐藏它并移除:hover状态。我发现如果你在iOS设备的空白处点击(而不是在链接或带有:hover或cursor:pointer set的任何div上)，那么似乎没有注册任何点击，所以我猜这是主要问题。我

浏览 0提问于2013-08-28得票数 1

2回答

单击下拉菜单进行响应式布局

、、、

我正在完善一个响应的导航菜单，并希望让菜单图标点击有下拉菜单，而不是悬停效果。我使用的是Google，所以我不确定脚本src中是否已经准备好了，我是否需要在jquery中手动创建下拉菜单，或者只是简单的CSS或html5修复。谢谢你的反馈。 <!

浏览 2提问于2014-04-22得票数 0

回答已采纳

2回答

jQuery函数自动重载页面

、、、、

我在使用jQuery时遇到了问题。我做了一个下拉菜单，我想在点击菜单里的li标签时把它拉下来。我可以使用jQuery点击功能。它可以工作，但当jQuery功能完成后，网页会自动重新加载，下拉菜单再次隐藏。

浏览 3提问于2016-03-09得票数 0

1回答

CSS 3下拉菜单，子元素未正确出现

、、

我有一个用CSS创建的下拉菜单。菜单在中。问题是，当我试图访问子元素时，它们不能正确地出现。我已经在父元素和子元素之间留出了一些空白处，当鼠标光标指向该空白处时，下拉菜单就会隐藏。有没有什么方法可以让我保持一定的页边距，同时仍然可以看到子列表，就像jquery中那样。

浏览 3提问于2013-03-11得票数 0

1回答

如何动态更改按钮文本

、

我正在尝试使用选择下拉菜单在Android设备上解决user视图问题，而不是使用弹出窗口中的单选按钮来进行用户选择不过，我需要的是按钮文本根据用户所做的选择进行更改。

浏览 0提问于2012-09-14得票数 0

回答已采纳

2回答

Jquery CSS无显示

、、

我对Jquery是个新手，所以我真的需要你们的帮助。<script> jQuery(document).ready(functio

浏览 0提问于2013-05-02得票数 0

2回答

使用toggleClass()在jQuery中单击时触发多个操作

、

当我点击一个按钮时，我想要触发几个同时的动作。我尝试了很多东西，但都没有成功。帮个忙？

浏览 3提问于2022-02-23得票数 -2

2回答

在没有显示菜单的情况下隐藏单击上的整个选择下拉菜单

、

我试图隐藏一个点击事件的整个下拉菜单，但有一点延迟，它显示了一秒的菜单。，我希望它隐藏起来，而不显示菜单。 <option>1</option>

浏览 4提问于2017-02-01得票数 0

3回答

当用户单击外部时隐藏jQuery用户界面菜单

、、、

我正在使用jQuery UI菜单作为上下文菜单，所以当用户单击表中的单元格时，它会使用相关的选项。问题是，它并不是真正被设计成这样使用的，所以当用户单击菜单之外时，它不会隐藏。，菜单也会隐藏。编辑：拉出我使用的菜单： $("table.adminScheduleViewer tr td:nth-child(4), table.adminScheduleViewer tr td:nth-childmenu").css('to

浏览 4提问于2013-02-27得票数 1

回答已采纳

0回答

禁止双击动画，但再次允许

我有一个我隐藏的固定菜单，当我点击# menu -trigger时，它会从页面的一侧拉出菜单。如果我点击# menu -trigger或#menu-overlay，我会再次隐藏菜单。当我单击或双击# menu -trigger时，它会隐藏菜单并运行动画一次，但当我双击#menu-overlay时，它会动画两次，将页面上的所有内容滑动太多。我尝试使用.one点击功能，但当我重新打开菜单时，我无法使用覆

浏览 9提问于2017-06-04得票数 0

回答已采纳

1回答

菜单汉堡动画切换全页菜单

、、

基本上，我需要一个菜单汉堡，打开和关闭一个完整的菜单，但我不能让编码一起工作。所以我分别创建了菜单汉堡动画按钮和全页菜单，它们都很好用，现在我不知道如何把它们放在一起，我尝试了很久，但似乎无法工作，谁能帮上忙吗？

浏览 1提问于2015-10-19得票数 8

2回答

Jquery-隐藏div

information hereinformation here我是某个按钮点击事件的当我在div(idshow)之外点击的时候，我想要的东西应该是隐藏的。就像我点击菜单，菜单就会显示，当我点击外部菜单时，它

浏览 1提问于2010-05-28得票数 14

回答已采纳

2回答

我想隐藏下拉点击身体和显示切换按钮点击

、、

我正在做的代码隐藏和显示下拉点击触发器按钮和隐藏点击身体除了触发器按钮，它工作得很好。但如果我单击下拉菜单，它也会隐藏下拉菜单。我不想在点击打开的下拉列表时执行身体点击功能<div class="mhb-item-inner tabletMobile"> <a class== jQuery('.tabletMobi

浏览 19提问于2019-04-06得票数 0

4回答

单击时隐藏Div

、、、、

我有一个小的HTML/CSS/JQuery下拉菜单。mainMenu ul li:hover .subMenu {}<div id="mainMenu

浏览 3提问于2011-10-12得票数 1

回答已采纳

4回答

菜单只点击一次

、、、

我有一个菜单div是不透明度0，可见性隐藏最初。我非常想让这个div在另一个div的点击中可用(它是一个菜单，它附着在我的页面顶部，可以通过单击发现/隐藏)。/* Disc

浏览 12提问于2015-05-14得票数 0

回答已采纳

1回答

在Android浏览器上仍然可以点击隐藏的链接

、

我有一个上下文菜单，当点击一个按钮时就会出现。此菜单有一些链接，并在几秒钟后再次隐藏。问题是，在菜单消失后，链接仍然存在。它们不会显示，但可以单击，并且会显示绿色边框。几秒钟后它们就消失了。我尝试了许多隐藏菜单的方法:显示:无，可见性:隐藏，宽度: 0，高度: 0，jquery隐藏，jquery淡出...但没有一个管用。还隐藏了链接。有谁知道发生了什么事吗？

浏览 0提问于2010-05-13得票数 4

点击加载更多