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

最新推荐文章于 2022-04-26 14:30:51 发布

my_potato

最新推荐文章于 2022-04-26 14:30:51 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/my_potato/article/details/80305630

版权

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>

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

得之我幸

11-08

905

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

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

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

fyj的博客

02-08

5940

$(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

2569

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

147

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

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

10-15

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

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

08-28

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

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

10-23

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

js实现的点击div区域外隐藏div区域

10-25

在Web开发中，经常会遇到需要实现点击某个区域之外的页面其他部分来隐藏该区域的需求。本文所讲述的是基于JavaScript和jQuery实现点击div区域外隐藏div区域的技术细节和实现方法。通过分析文档中提供的代码示例和...

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

weixin_30344131的博客

04-15

155

弹出层简称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

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

杭电michael

09-29

291

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

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

weixin_43918109的博客

05-12

690

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

鼠标点击页面的其它地方div自动隐藏

wandong01的专栏

11-11

2252

（一）加入关闭按钮只要再加一个onclick 时间就行了，turnoff（‘ ’）里的参数可以改变。代码如下

点击其他区域，隐藏弹窗或各种元素的原理

weixin_42333548的博客

04-26

1980

点击其他区域，隐藏弹窗或各种元素的原理

js实现点击按钮出现元素，点击其他地方隐藏该元素

weixin_43258896的博客

11-19

7141

首先为控制出现消失的被点击元素添加点击事件，并且使用stopProp()函数防止该元素上的事件冒泡。然后给body添加点击事件，点击时需要消失的元素添加属性display: none;，这样变可以实现点击其他区域该元素消失。注意几点：初始display: none;属性需要设置成行内样式，否则会导致element.style.dispaly方法第一次获取不到值而需要点击两次才能看到效果。如果非要设置成外联样式，可以使用window.getComputedStyle(element, [pseudoEl

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

weixin_30457465的博客

04-13

839

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

jQuery点击页面上某元素之外的地方进行指定操作