开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery点击非菜单处隐藏

基础概念

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

相关优势

简化代码：jQuery 的语法简洁，可以减少大量的 JavaScript 代码。
跨浏览器兼容性：jQuery 处理了不同浏览器之间的差异，使得代码在不同浏览器中都能正常运行。
丰富的插件：jQuery 拥有大量的插件库，可以轻松实现各种功能。
事件处理：jQuery 提供了强大的事件处理机制，使得事件绑定和解绑变得非常简单。

类型

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 默认隐藏div,点击按钮显示，再次点击隐藏

html 代码： 22222222 jquery 代码

8.9K3 0

点击空白处隐藏软键盘

在点击Editext的时候安卓会弹出软键盘,在我们输入完后不点击软键盘的”完成”键的时候,软键盘有时候会一直停留在”界面”,甚至跳转到另一个”界面”上.这样体验上不是很好.所以点击非EditText...区域上,让软键盘隐藏起来是一种可行的方案....，来判断是否隐藏键盘，因为当用户点击EditText时没必要隐藏 * * @param v * @param event * @return...Edittext内,在就让软键盘弹起 // 点击EditText的事件，忽略它。...return true; } } return false; } /** * 隐藏软键盘

1.5K2 0

【Flutter 实战】全局点击空白处隐藏键盘

老孟导读：为什么要实现点击空白处隐藏键盘？因为这是 iOS 平台的默认行为，Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮，所以点击空白处不会隐藏键盘。...对于单个页面来说，通过为 TextField 添加 focusNode，点击空白处时使 TextField 失去焦点，实现如下： class DismissKeyboardDemo extends StatelessWidget...focusNode, ), ), ), ); } } 当 App 中有多个页面多个 TextField 时，此方式会增加大量重复的代码，因此全局添加点击空白处的监听...child: child, ), ), home: DismissKeyboardDemo(), ); } } 也可以使用如下方式隐藏键盘...appBar: AppBar(), body: Center( child: TextField(), ), ); } } 效果和上面是一样的，同样可以实现点击空白处隐藏键盘

4.2K1 0

jQuery二级菜单的显示隐藏

在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。HTML 结构首先，需要创建适当的HTML结构来表示二级菜单。一种常见的方法是使用嵌套的和元素。...每个菜单项都包含一个链接，以及一个嵌套的无序列表来表示二级菜单。CSS 样式接下来，需要使用CSS样式来控制二级菜单的显示和隐藏。可以通过设置样式的display属性来实现。...*/}上述示例中，我们使用CSS选择器将二级菜单设置为默认隐藏。...JavaScript 交互要使用jQuery实现二级菜单的显示和隐藏，可以使用jQuery的事件处理函数。...当鼠标进入菜单项时，使用slideDown()方法显示相应的二级菜单。当鼠标离开菜单项时，使用slideUp()方法隐藏二级菜单。

3.3K3 0

jQuery Mobile(jqm)按钮的隐藏和显示,包括a标签,圆角和非圆角按钮

由于对于jquery的熟悉，jquery mobile 为多数人选择学习的对象。我也是众多追求者之一。最近一直在开发jQuery Mobile的相关应用。并颇有心得，再这里和大家一起分享一下。....min.css"> jquery.com/jquery-1.8.3.min.js"> jquery.com...2，隐藏按钮1，并且将按钮2改为圆角点击按钮3，显示按钮1，并且将按钮2改为非圆角如有不懂，请加qq群：135430763，共同学习...5，隐藏按钮4，并且将按钮5改为圆角点击按钮6，显示按钮4，并且将按钮5改为非圆角 <div data-role="controlgroup...); } //a6标签的onclick事件 function showA(){ $('#a4').css('display',''); //给a5标签删除样式，使a5标签变成非圆角

3.5K3 0

jQuery实现元素的鼠标移入移出及点击显示隐藏（微信二维码）

网站底部经常会有微信图标，鼠标点击或者划入显示二维码的效果。怎么来实现它呢？我们首先写一个简单的页面，实现鼠标移入移除或者点击显示隐藏效果。...事件-div的显示隐藏及鼠标的移入移出 jquery.js"> .header{... JS代码：鼠标点击效果1： $(function (){ //显示隐藏 $(".header").click...content").show(); }else{ $(".content").hide(); } }); 鼠标点击效果...事件-微信的显示隐藏及鼠标的移入移出 jquery.js"> <div style="width: 230px

3.8K0 0

js控制json生成菜单——自制菜单

js控制json生成菜单——自制菜单（一）此文档解决以下问题： 1.JSON文件的书写方式 2.jQuery.getJSON()的运用 3.jQuery.each()的运用 4.jQuery的DOM...//其他子菜单项隐藏 $("li.1").children("ul").slideDown();...$("li.1").siblings().children("ul").slideUp(); //6.为一级菜单绑定点击事件...//一级菜单项可以滑动显示或隐藏子菜单项 //同时，当前菜单显示，则其他都隐藏 $("." + data[i]["navId...}) } if(data[i][key] == i + 1) { //5.判断非一级菜单项

3322 0

Jquery EasyUI---Datagrid右键菜单

最近在学Jquery EasyUI，现在来说一说EasyUI的DataGrid，一般当我们在实现前端界面的时候，经常在DataGrid 的上面或者后面加一些按钮，方便用户进行一些添加，删除，...--放置一个隐藏的菜单Div--> 删除...(e, rowIndex, rowData) { //右键时触发事件 //三个参数：e里面的内容很多，真心不明白，rowIndex就是当前点击时所在行的索引，rowData当前行的数据...left: e.pageX,//在鼠标点击处显示菜单 top: e.pageY }); e.preventDefault...(); //阻止浏览器自带的右键菜单弹出 } }); 下面是实现后的效果： ?

3K1 0

移动Web 开发中的 Off Canvas 导航

Off Canvas 简介 Off Canvas 导航相比也不陌生，在一些安卓应用（如谷歌的一些官方应用、易信、WordPress 安卓版）上常常能到——看到当你点击应用中的一个按钮时，会从左边或者右边侧拉出一个菜单...移动设备中空间极为有限，要显示最重要的内容，一些次要的或者不常用的内容最好做暂时隐藏处理，而专为移动端而生的Off-Canvas 就是这么一种“潜力无穷”的布局模式。...移动Web 开发中的 Off Canvas 在移动网页中要产生类似 Off Canvas 的效果，如果学过前端，貌似也容易想到思路，先产生导航菜单（HTML+CSS），默认隐藏或移动到看不见的位置（...左侧或右侧），然后通过绑定某个鼠标或touch 事件调出导航菜单。...但细细考虑，该如何实现这个“调出导航菜单”的过程？用CSS的margin？还是CSS的display？或者说 jQuery 的animate ？CSS3 的 transition？

1.8K5 0

五、jQuery动效

显示隐藏动画显示show()动画，隐藏动画hide()，切换动画toggle() 这三个方法都可以传入参数：一个参数代表动画完成的时间两个参数第一个表示动画完成的时间，第二个参数表示动画完成后执行的回调函数...监听一级菜单的点击事件 $('.nav>li').click(function () { // 1.1 拿到二级菜单...(1000) // 1.5让被点击的一级菜单箭头旋转 $(this).addClass('current')...// 1.6 让所有非一级菜单箭头还原 $(this).siblings().removeClass('current') })... 下拉菜单案例在jQuery中，如果需要执行动画，建议在执行动画之前先调用stop方法，然后在执行动画。

2K3 0

jqm选项卡开发,底部标签式设计,jqm模仿iPhone手机桌面菜单,jqm实战开发,jqm开发例子Demo

所以我就只能自学了，今天我给大家带来的是jQuery Mobile 模仿iphone 手机桌面的选项卡功能。比如电话，短信，浏览器，音乐的标签菜单。好吧，直接上代码： --> jquery.com/mobile/1.3.2/jquery.mobile-1.3.2....min.css"> jquery.com/jquery-1.8.3.min.js"> jquery.com.../mobile/1.3.2/jquery.mobile-1.3.2.min.js"> //home菜单的onclick...return false;">Four 更多功能示例，请点击下载

7284 0

clientX和clientY 事件属性的使用

需求：做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。...图片.png 遇到的坑这个功能在一些浏览器里面的兼容性和适配性的介绍 jQuery右键点击弹出菜单，菜单随鼠标点击的位置的变化而变化 jquery.com.../jquery-1.8.0.min.js"> <div class="dropdown open" id="treeContextMenu...left: x, top: y }); } }); //点击任意部位隐藏

1.6K1 0

jquery入门

运用jQuery时，需要在页面中引入jQuery文件 jQuery的hello world <!...;height: 200px;background: red;} 点击我试试...> 卷帘隐藏卷帘显示/隐藏状态切换... 首页二级菜单首页二级菜单首页二级菜单...音乐二级菜单音乐二级菜单音乐二级菜单音乐二级菜单

2.9K2 0

换上了自己写的模板

然后根据尺寸输出对应的css样式，比如说我的这个sidebar，屏幕width大于等于1024px时，sidebar宽度250px,当屏幕width小于1024px大于768px时，sidebar宽度75px，平且隐藏掉文字...，同时头像设为40x40，当屏幕width小于768时，sidebar向左移动250px，这时就已经看不到sidebar了，这样设置主要是想在手机端时点击菜单按钮，在让sidebar向右移动250px。...Javascript设置: 因为加载了jquery所以这个最基本的配置很简单，一个手机端的菜单交互，一个搜索按钮的交互，还有个对于屏幕尺寸变化触发的代码 $(".sjcd").click(function...(){//菜单按钮点击触发 $('#menu').toggleClass('menu'); $('#zhezhao').toggleClass('zhezhao'); }); $("#sousuo"...initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 一些配色：主体背景色与文字色搭配：白#ffffff + 漆黒#0d0015 通知处背景色与文字色搭配

6661 0

利用JQuery实现左侧菜单栏可折叠功能

第一种变换形式是：不管点击哪一级菜单都可以打开或者关闭本级菜单，但是不会影响其他级别的菜单： jQuery点击展开收缩树形菜单 jQuery点击展开收缩树形菜单菜单会互相影响，也就是一级菜单同时只能打开一个，其他都得处于关闭状态。而且二级菜单也会受到影响，也就是当点击一级菜单的时候，所有的二级菜单都会处于关闭的状态。 jQuery点击展开收缩树形菜单 <style

7K7 0

鼠标右键弹出菜单

鼠标右键弹出菜单开发工具与关键技术：MVC 作者：盘洪源撰写时间：2019年5月22日星期三想必有很多人会遇到一些页面在点击右键的时候会弹出来一个菜单栏，这个并不是系统的那个菜单栏，而是自定义的菜单...:white;box-shadow:1px 2px 3px black;"> 导出Excel 打印预览 Jquery...在对应的地方点击右键，菜单就在对应的位置显示出来，而在单击任何地方的时候把菜单隐藏掉。这个效果要怎样做到？...再下面这一串代码，首先我这个是点击某个内容区的右键才弹出来菜单的，所以这个zhong是内容区的ID，然后就是获取鼠标点击的坐标位置，再把写好的菜单现在对应的坐标位置上。...$(document).click(function () { $("#box-data").hide(); }) 这个是点击页面任何地方把菜单隐藏掉。

2.9K2 0

最简单的纯js实现点击展开二级菜单功能

虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。...我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单...这里有两个点，实现展现和隐藏用display=”block“和display=”none”,另外就是要做一个判断，if else的判断当前是block还是none。 <!...2 二级菜单2 二级菜单2 二级菜单2 二级菜单2...如果，你的页面默认进来二级菜单是展现的，点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。

4.3K2 0

又到公司年会时，给公司写的年会抽奖程序！

media="screen, projection"> ▪ 按键盘空格键或者字母A可进行抽取,隐藏菜单请按... ▪ ESC菜单中高级设置可以设置参与人数，格子大小，重置抽奖数据等信息。 ▪ 点击已经中奖格子并输入点击的格子编号可取消该格子中奖状态，并清除中奖信息。.../js/jquery.js"> jquery.js"> 点击阅读原文。 ↓↓↓↓↓↓

2.1K7 0

jQuery笔记(1) (多图)

如何使用: 首先我们去到jQuery官网,点击下载压缩的比较厉害,我们直接粘贴到我们自己创建的jQuery.min.js文件里就好了现在做一个操作感受一下jQuery的优势:...隐藏box盒子居然只要一行就能搞定了!...菜单是这样的,我们的需求是当鼠标经过上面的li时,下面的菜单会自己弹出来....让下拉菜单显示的方法鼠标离开后ul继续隐藏 siblings(selector) 查找所有的兄弟元素 eq(index) 根据索引选择元素但是更推荐下面这种,如果index为变量时方便修改...,最常见的如下: 显示隐藏效果语法: 显示: hide([speed, [easing], [fn]]) 隐藏: hide([speed, [easing], [fn]]) 切换: hide([

9K1 0

iOS支持展开折叠的弹出菜单（水平方向弹出菜单视图）

： 1.1将弹出视图添加到keyWindow，蒙版也添加到主窗口(主要原因是点击屏幕的空白处，需要隐藏弹出视图) 1.2展示的时候，动画从右上角往左下脚延伸；隐藏的时候，动画从左下脚往右上角收回（展示的时候...I、支持展开折叠的弹出菜单的实现思路 1.1将弹出视图添加到keyWindow，蒙版也添加到主窗口(主要原因是点击屏幕的空白处，需要隐藏弹出视图) #define kWindow [UIApplication...，来隐藏弹出视图 1.2 展开展示的时候，动画从右上角往左下脚延伸；隐藏的时候，动画从左下脚往右上角收回（展示的时候，从上往下，即x,y 慢慢变大）展开效果的实现原理： 1 点击展示商品信息的...cell 上面的弹出按钮时，阴影alpha由0到1，弹窗的scale由0到1（这里使用CABasicAnimation） 2 点击空白处（self.cover），再让阴影alpha由1到0，弹窗的scale...： 1.1将弹出视图添加到keyWindow，蒙版也添加到主窗口(主要原因是点击屏幕的空白处，需要隐藏弹出视图) 1.2展示的时候，动画从右上角往左下脚延伸；隐藏的时候，动画从左下脚往右上角收回（展示的时候

2.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭