jquery点击非div区域隐藏div

点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框…

最近做项目要用到三字码下拉,调用一个插件,但是滚动条不能点击. 后来看另一个插件后突发奇想,在点击其他区域的时候隐藏这个Div就可以了. 背景:输入文字,弹出下拉Div,点击或者拉动Div滚动条选择,但是要点击滚动条的时候会隐藏掉,也就是点击不了滚动条. 思路:写一个Document级别的事件,监听MouseDown事件,判断点击区域进行判断是否要隐藏这个下拉Div. JS版实现: $(document).bind('mousedown',function(event){ var $targ…

jquery点击按钮显示和隐藏DIv

function changeDisplay() { if ($("#btnShow").attr("value")== "添加附件") { $("#IdShow").show(); $("#btnShow").attr("value", "取消添加附件"); } else { $("#IdShow").hide(); $("#btnSh…

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

$("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('click', function () { $('#setUp').hide(); }) e.stopPropagation();/*stopPropagation();方法可以阻止把事件分派到其他节点*/ });…

React 点击按钮显示div与隐藏div，并给div传children

最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {render} from 'react-dom'; export default class FilterButton extends Component{ constructor(props){ super(props); this.state = { clickProps:{ display: 'n…

点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="text/css"> body { background-color:#999999; } #myDiv { background-color:#FFFFFF; width:250px; height:250px; display:none; } </style> <body>…

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <…

由点击页面其它地方隐藏div所想到的jQuery的delegate

对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件冒泡, 事件冒泡 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元素 Netscape的事件捕获:不太具体的节点更早接收事件,而最具体的元素最后接收事件,和事件冒泡相反 DOM事件流:DOM2级事件规定事件流包括三个阶段,事件捕获阶段,处于目标阶段,事件冒泡阶段,首先发…

JQ 点击指定文本框显示div。点击其他区域隐藏DIV

<input id="username" type="text" style="width:90%;margin-top: 40px;" placeholder="請輸入車場名稱或車場間稱" class="text_name" name="username"/> <div class="text_div_all" style="displa…

jquery实现点击div外隐藏div

html <div style="width:100px;height:100px;border:1px solid #ff0" id="div">div</div> js document.on("click",function(e){ if($(e.target).closest("#div").length=0){ $("#div").hide(); } })…

点击页面任何位置隐藏div

<include file="Public:header" /> <style type="text/css"> table{width:100%;margin: 0;} </style> <script type='text/javascript' src="/{:APP_PATH}/Public/js/unslider.min.js"></script> <script typ…

JS 实现点击页面任意位置隐藏div、span

通过调用下面的 showhidden(“标签ID”) 显示div/span/…等标签内容,可以实现点击页面任意地方再次隐藏该标签内容,而showhidden(“标签ID”,”nohidden”)可保存显示不隐藏.可用于仿下拉框及下拉菜单的实现. var nowshowdiv=""; function showhidden(div,nohidden){ if(div!=""){ if(document.getElementById(div).style.display…

用JS把复选框做成单选框,左显示div,右隐藏div

<input type="checkbox" name="checkname" onclick="check(this)"/>左 <input type="checkbox" name="checkname" onclick="check(this)"/>右 <div id="show" style="display:block…

点击div区域以外部分，div区域隐藏

核心思想: 监听body的click事件,事件触发的时候判断是否发生在弹出的div上,如果不在,关闭弹层 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"…

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

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

jQuery 点击当前展开其他隐藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title…

JS 实现显示和隐藏div（以百度地图为例）

主要参考的文章:https://my.oschina.net/xsh1208/blog/215811,https://zhidao.baidu.com/question/568774688.html 隐藏和显示div的方式有两种: 方式1:隐藏后仍占有页面空间,显示空白div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白.style="visibility: none;"document.getElementById("typediv1")…

jquery点击区域显示或隐藏DIV,点击非该DIV的地方隐藏该DIV

<div class="Content_top"> <div class="Reserve"> <h3><span class="current">散租自驾</span><span>商务代驾</span><span> </span><span> </span><span> </span><…

jQuery实现鼠标点击Div区域外隐藏Div

冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络) 1. 阻止事件冒泡, 并不阻止事件行为:event.stopPropagation(); $(function() { $("#link").click(function(event) { event.stopPropagation(); }); }); 2. 阻止事件行为,并阻止事件…

Jquery点击除了指定div元素其他地方，隐藏该div

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <title></title> <script type="text/javascript"&…

js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropagation 方法的使用,该方法将停止事件的传播,阻止它被分派到其他 Document 节点. function stopFunc(e) { e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; };//获取元素的…

锋利的Jquery(点击显示隐藏div)

点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; c…

jquery点击其他地方隐藏div层的实现程序

js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) { $(".language_list").toggle(); e.stopPropagation(); //阻止事件冒泡,否则事件会冒泡到下面的文档点击事件 }); //点击文档时,隐藏语言列表 $(document).click(function() { $("…

js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂客首页</h1> <button class="nav_btn"></button> <ul class="menu"> <li><a href="#">首页</a>…

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

首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.对于非IE浏览器:stopPropagation().2.对于IE浏览器:cancelBubble属性为true <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu…

js实现点击div以外区域，隐藏div区域

<body style="text-align:center;"> <input type="text" style="width:200px;height:30px;background:pink;margin-top:100px auto 0;"> <div style="width:300px;height:300px;background:red;margin:0 auto;display:none…

点击页面其它地方隐藏该div的两种思路

思路一第一种思路分两步第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. 复制代码代码如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagat…

点击页面其它地方隐藏该div的方法

思路一第一种思路分两步第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else…

点击div和某些控件之外的地方隐藏div，点击div不隐藏。对象 click和document click冲突有关问题

帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题!!对象 click和document click冲突问题我想点击某个元素显示一个对象, 点击页面任意处,隐藏这个对象 //点击look对象,显示隐藏mydiv $("#look").bind("click", function () { $("#m…

jQuery第三课点击按钮弹出层div效果

jQuery 事件方法事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件. 绑定实例: $("button#demo").click(function(){$("img").hide()}) 上面的例子会在点击 id="demo" 的按钮时隐藏所…