jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框-->
<div class="layui-input-block expression-box">
</div>
<div class="layui-input-block" style="width: 600px; margin: 0 auto; border-left: 1px solid #4a4f58; border-right: 1px solid #4a4f58;">
<i title="表情" class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF; margin-right: 10px; cursor: pointer;" onclick="showEmotionDialog();"></i>
<i title="文件" class="layui-icon layui-icon-file" style="font-size: 30px; color: #1E9FFF; margin-right: 10px; cursor: pointer;" onclick="selectFileClick()"></i>
<i title="图片" class="layui-icon layui-icon-picture" style="font-size: 30px; color: #1E9FFF; cursor: pointer;" onclick="selectPicClick()"></i>
</div>

$(document).click(function (e) {
var $target = $(e.target);
//点击表情选择按钮和表情选择框以外的地方 隐藏表情选择框
if (!$target.is('.expression-box *') && !$target.is('.chat-bottom-box i[title="表情"]')) {
$('.expression-box').hide();
}
});
jquery实现除指定区域外点击任何地方隐藏DIV的更多相关文章
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- 点击除指定区域外的空白处,隐藏div
<script> $(document).click(function (e) { var $target = $(e.target); //点击.zanpl和.quanzipl以外的地方 ...
- jquery点击其他地方隐藏div层的实现程序
js代码 $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(funct ...
- 点击其他地方隐藏div
document.onclick = function(e){ var ele = e?e.target:window.event.srcElement; if(ele.id !== 'valueSh ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- Jquery手机点击其他地方隐藏控件问题
因为不太懂mui的底部导航栏的操作,所以自己写了用很普通的方法实现手机底部导航栏,遇到了很多问题.比如:要实现点击底部菜单栏上某一个菜单,显示子菜单,然后点击手机空白处,隐藏菜单. 实现方法是: // ...
- 点击其它地方关闭DIV
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- 纯CSS实现点击事件展现隐藏div菜单列表/元素切换
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...
随机推荐
- 2016级算法期末上机-B.简单·ModricWang's Fight with DDLs I
1124 ModricWang's Fight with DDLs I 思路 这道题本质上就是一个多项式求值,题目中的n需要手动算一下,单位复根可以根据复数的性质来求,即\(e^{i\pi}+1=0\ ...
- 服务器端控件同html控件的区别
●ASP.NET中共有几种类型的控件? 三种:1-asp.net控件(动态) 2-标准的html控件(静态) 3-标准的html控件加runat="server"属性(动态) 动态 ...
- javascript的HelloWorld
javascript:边解释边执行.是一种解释型语言. defer属性,延迟执行代码,(整个页面加载完之后,window.onload) 代码: <!DOCTYPE HTML PUBLIC &q ...
- Chapter 6. Names
6.2. Names and Identifiers A name is used to refer to an entity declared in a program. There are two ...
- JavaScript设计模式-12.门面模式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 配置Linux本地源镜像
今天看到同事做了一个公司本地的apache镜像源,感觉好叼的样子.然后就自己上网找些资料,尝试自己搭建一套出来.然后就有了这篇博文... 声明:本文中充满了浓浓的技术嫉妒的心理,阅读需谨慎. 本文以 ...
- WPF的System.Windows.Threading.DispatcherTimer的使用(每隔一定的时间重复做某事)
这里使用了一个进度条来展示, 前段代码: <Window x:Class="TimerTest.MainWindow" xmlns="http://schemas. ...
- java多线程---------java.util.concurrent并发包----------ThreadPoolExecutor
ThreadPoolExecutor线程池 一.三个构造方法 ThreadPoolExecutor(int corePoolSize,int MaxmumPoolSize,long KeepAlive ...
- mongo实体设计1 tag
public class TagProperty { private String type; private int count; } @Document(collection = "ta ...
- java并发编程(5)并发程序测试
并发程序测试 一.正确性测试 如:对一个自定义缓存的测试 //自定义的缓存 public class SemaphoreBoundedBuffer <E> { private final ...