点击区域显示，点击页面其他位置隐藏

最新推荐文章于 2022-11-11 20:42:58 发布

原创最新推荐文章于 2022-11-11 20:42:58 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何通过点击按钮、div区域等元素触发显示内容的功能，并探讨了如何使用$(document).one(click

1、点击按钮、div区域、select...显示内容；

2、$(document).one("click",function(){});点击页面其他区域；

3、e.stopPropagation();防止影响到其他的节点；

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

my_potato

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

jQuery点击页面其他部分隐藏下拉菜单功能

12-29

一、开发小要点 web页面中，我们一般不用select、option来实现下拉菜单效果，因为下拉框的样式丑且难以美化，所以我们选择控制ul显示隐藏来实现同样且高大上的效果，但是不能像下拉框那样点击页面其他部分，下拉菜单收起或隐藏，该怎么办呢？只能用js这老大哥来控制了。二、代码 HTML： <div class=select_box id=selected> <div class=select> <span>请选择</span> </div> <ul class=list> <li>01</li> <li>02</li>

BootStrap自定义popover,点击区域隐藏功能的实现

08-28

"BootStrap自定义popover,点击区域隐藏功能的实现" 本篇文章将为大家分享Bootstrap框架中自定义popover的实现方法，包括点击区域隐藏功能的实现。Bootstrap是目前最流行的前端框架之一，提供了许多有用的功能和组件...

参与评论您还未登录，请先登录后发表或查看评论

点击按钮显示信息，点击按钮外的其他地方隐藏信息

得之我幸

11-08

987

点击按钮显示信息，点击按钮外的其他地方隐藏信息本来是使用mouseover和mouseout事件，这样pc端就是鼠标悬浮事件，在安卓移动端也可以通过点击实现，可是ios不接受，所以只能改代码。通过给body绑定点击事件实现点击按钮外的地方触发隐藏信息事件，特别需要注意的是，给body绑定的事件A应该添加到事件捕获阶段，避免点击按钮时因为事件冒泡触发了事件A。代码： 1.使用mouseover...

js 点击其余地方，隐藏目标区域

fyj的博客

02-08

6029

$(document).mouseup(function(e){ var _con = $(' 目标区域 '); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 some code... // 功能代码 } }); /* Mark 1 的原理：判断点击事件发生

js/jq 点击按钮显示div,点击页面其他任何地方隐藏div

前端小狮的博客

11-09

2639

JS效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &

jquery点击页面其他位置隐藏div

weixin_30602505的博客

04-30

190

//设置 document.onclick = function (e) { $("#setUp").hide(); } $('#btnAdd').on("click", function (e) { $("#setUp").toggle(); e = e || event; s...

Vue实现点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)

10-15

在Vue.js中，实现点击显示再点击隐藏的功能，同时点击页面空白区域也能隐藏效果，是一项常见的交互需求。这种效果常用于下拉菜单、模态框或者任何需要控制显示与隐藏的组件。以下将详细讲解如何在Vue中实现这一功能...

jquery实现点击其他区域时隐藏下拉div和遮罩层的方法

10-23

5. 显示和隐藏的控制：通过调用jQuery的.hide()方法来隐藏选中的元素，从而实现点击页面其他区域时隐藏下拉菜单和遮罩层的效果。上述内容中的代码示例演示了如何通过绑定点击事件到document对象，并在事件处理函数...

点击元素以外的地方隐藏元素插件

03-28

它首先会绑定一个全局的点击事件监听器到document对象上，当用户点击页面时，插件会检查点击位置是否在目标元素或其子元素内。如果不在，那么就会执行预设的隐藏动作，将目标元素从视图中移除。这种行为可以有效地...

点击页面其他区域隐藏弹出层

weixin_30344131的博客

04-15

210

弹出层简称pop，隐藏方法有两种。 1. pop上阻止冒泡，document上click隐藏pop jquery实现 $("#showPop").on("click", function(e) { $("#pop").show(); $(document).one("click", function() { $("#pop").hide...

点击图片任意一点显示所点击的坐标

07-14

点击图片的任意一点获得坐标，并在窗口中将所点击的点的坐标显示出来 -Click the picture to obtain the coordinates of any point and click in the window by the coordinates of the points displayed

实现点击页面其他部分隐藏指定div

qian_li_hui的博客

04-06

366

实现点击其他部分隐藏某个div 一、在点击展示的元素上设置@click.stop="" <div class="proTitle" @click.stop="showModel()" style="width:250px; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display: flex;align-items: center;"> <span type="text" class="" id="na

js 关于鼠标在页面中坐标显示的种种

杭电michael

09-29

335

[b][color=red]首先先看一段代码[/color][/b] [code="html"] function mouseCoordination(michael){ //以下主要是对不同浏览器进行兼容操作 if(michael.pageX || michael.pageY){ //IE不支持pageX之类的这里主要是对于chrome...

如何实现点击别处关闭浮层（一）

weixin_43918109的博客

05-12

765

如何实现点击别处关闭浮层（一）准备最简单的浮层点击按钮出浮层。代码` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="wrapper" class="wrapper"> <button id="clickMe">点我

C#Winform窗体与界面设计

08-01

本课程是针对C#Winform开发人员的基础性课程，详尽的介绍C#Winform窗体与界面的设计，通过提供实例，让C#Winform开发人员掌握相关程序设计技巧，为后面学习完整的实战课程打下较好的基础。

获得鼠标在页面中的坐标

lxllxl211的博客

11-11

1303

鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。event对象代表事件的状态，跟事件相关的一些列信息的集合。运行结果：点击浏览器可视区任意位置。

JavaScript:显示鼠标单击位置

WHT869706733的博客

12-01

1389

样式： <style> .mouse { position: absolute; background: #ffd965; width: 40px; height: 40px; border-radius: 20px; } </style> <body> <div id="mouse" class="mouse"></div> <script&g.

js实现点击按钮显示某个区域然后点击页面中任意其他位置，隐藏该区域

weixin_30457465的博客

04-13

891

$(".licat-header-list").on("click",function(e){ $(this).addClass("active");//有class名active时，其下边的ul列表显示，否则隐藏 e.stopPropagation(); $("body").one("click",function(e){ ...

js怎样获取鼠标在页面点击时的位置信息坐标信息

07-06

7246

获取鼠标在页面点击时的坐标信息有时候也有它的用户首先，监听页面的点击事件，然后打印其中的事件中的一些属性clientX 和clientY即可得到坐标信息了然后随便在页面点击即可在控制台看到点击的坐标信息了注意clientX,clientY是从浏览器的页面顶部算起的，不包括顶部的工具栏如果想要从电脑屏幕顶部算起那就就要使用screenX和screenY来获取了。 ...

web如何实现点击标签显示隐藏页面