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 ...
随机推荐
- 原生js实现form表单序列化
当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...
- python 操作jenkins 常用api
Python-Jenkins 继续寻找,然后我在Jenkins官网上找到了Python-Jenkins API,仔细阅读后发现,它几乎涵盖了大部分Jenkins的操作,大大方便了我们在后台进行对Jen ...
- leetCode笔记--(1)
陪朋友刷题,记录下. 1.Evaluate the value of an arithmetic expression in Reverse Polish Notation.Valid operato ...
- 使用gson进行数据(集合数据)的转换 并且返回给前端 进行动态解析 并添加
后台使用gson转换工具把list集合数据 以json字符串的方式返回给前台 解压: 加入到工程中 前台页面进行数据解析时 需要把得到的字符串 转换为object数组 -------------- ...
- C#中的Socket
];//用于缓存客户端所发送的信息,通过socket传递的信息必须为字节数组 IPEndPoint ipep = new IPEndPoint(IPAddress.Any, 9050);//本机预使用 ...
- BA-Honeywell WEBsAX系统
- BA-siemens-TX-IO模块照片
西门子楼宇自控用到的P1模块是这样的 TX-16D模块是这样的 TX-8X模块是这样的: TX-6R模块是这样的: TX-IO总线连接模块( 此模块供电和通讯加起来共需三芯线):
- 初学JavaScript之推測new操作符的原理
本文是一篇原理推測的文章,假设有不准确的地方请指正, 原文:http://blog.csdn.net/softmanfly/article/details/34833931 JavaScript中构造 ...
- HDU 1042.N!【高精度乘法】【8月24】
N! Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N! Input One N ...
- 2015.04.19,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 29
1.the French drillmaster 法国国王路易十五手下的Jean Martinet将军,是Infantry(['infәntri] n. 步兵)的检察长,是一个非常严格的drillma ...