jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层
1.html
<a id="more" onclick="moreFun()">更多</a>
<ul id="moreList" style="display:none">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
2.实现点击更多按钮弹出moreLise列表,点击页面其他地方关闭moreLise列表,js代码如下:
//使用toggle方法实现列表的展开和关闭
function moreFun(){
$("#moreList").toggle();
}
//点击页面其他地方关闭
document.onclick = function (e) {
//判断点击的地方是否为“更多”按钮和弹出层是否显示
if(!$(e.target).is(".more") && $("#moreList").is(":visible")==true){
$("#moreList").hide();
}
}
jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层的更多相关文章
- 关于JavaScript点击按钮打开多个页面被浏览器以广告嫌疑拦截怎么解决
JS点击按钮打开新的标签页,工作中遇到需要点击按钮打开一个或多个,需要用到window.open() 工作中我们可能需要打开多个,看以下代码: var data = [{ "id" ...
- 新建一个Activity通过按钮打开它,再通过按钮关闭它
首先需要创建一个供打开和关闭的Activity,先在scr下当前项目的包中创建一个新类Activity1, 并选择让其继承自Activity类,如下图所示: 之后配置AndroidMainifest. ...
- vue自己写了一个div菜单,点击按钮展开,点击其他地方关闭这个div菜单
需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- jeecg 弹出框 点击按钮回调父页面 返回值
jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...
- jQuery点击自身以外地方关闭弹出层
转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...
- bootstrap 弹出框点击其他区域时弹出框不消失选项设置
默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...
- Android编程实现点击链接打开APP功能示例
本文实例讲述了Android编程实现点击链接打开APP功能.分享给大家供大家参考,具体如下: 在Android中点击链接打开APP是一个很常见的需求.例如,电商为用户发送优惠券之后经常会下发一条短信: ...
- 报错:已有打开的与此命令相关联的 DataReader,必须首先将它关闭。
SqlParameter[] sp = { new SqlParameter("@nGridID",SqlDbType.BigInt), new SqlParameter(&quo ...
随机推荐
- Period UVA - 1328_结论题
Code: #include<cstdio> #include<cstring> using namespace std; const int maxn=1000000+5; ...
- 训练1-N
给出N个整数,对着N个整数进行排序 Input 第1行:整数的数量N(1 <= N <= 50000)第2 - N + 1行:待排序的整数(-10^9 <= Ai <= 10^ ...
- Ubuntu安装Docker 适合Ubuntu17.04版本
Docker介绍 Docker是一个开源的容器引擎,它有助于更快地交付产品.Docker可将应用程序和基础设施层隔离,并且将基础设施当作程序一样进行管理.使用Docker,可以更快地打包,测试以及部署 ...
- win7下UDL文件不同
win7 执行UDL文件看不全all驱动.所以没有办法配置数据库的连接.查度娘,方法如下: 在C:\建一个test.udl 文件,运行命令 C:\Windows\syswow64\rundll32.e ...
- 简述Web Service通讯技术的搭建流程
Web Service 基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级 ...
- struts配置 WEB得拷贝要注意的事项
原始WEB文件tutoral===>新文件tutoralTest 要将靠拷贝的文件的contextRoot修改(一定要修改)
- Vijos—— T 1359 Superprime
https://vijos.org/p/1359 描述 农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因 ...
- 洛谷 P1272 重建道路(树形DP)
P1272 重建道路 题目描述 一场可怕的地震后,人们用N个牲口棚(1≤N≤150,编号1..N)重建了农夫John的牧场.由于人们没有时间建设多余的道路,所以现在从一个牲口棚到另一个牲口棚的道路是惟 ...
- node 上传文件 http client to post file
node做http client 发送post数据是很容易的事情,但要上传文件就不是太容易了主要是因为上传文件的报文和普通post是不太一样的 要了解http post可以看下这个 https://i ...
- 源码高速定位工具-qwandry
https://github.com/adamsanderson/qwandry qwandry 能高速定位到我们须要找到 库文件, 项目 的工具. Ruby中实现高速定位的方法有好多种.我知道的有三 ...