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 ...
随机推荐
- MySQL py模块的链接Navicat可视化工具
数据库可视化工具Navicat 1 基本操作: 1 库 表 字段 记录(增删改查) 2 添加主建,添加自增. 3 添加外键,外键的链接 4 模型建表,模型添加外键.(逆向数据库到模型,运行SQL文件 ...
- ListUtil常用操作
/** * 获取列表总页数 */ public static <T> int getListPages(List<T> list,int pageNum,int pageSiz ...
- JavaScript学习笔记(第一天)
javascript个人笔记 JavaScript的组成 JavaScript是一种运行在客户端的脚本语言 ECMAScript 标准----js的基本的语法 DOM------Document ...
- 分类IP地址
分类IP地址是将IP地址划分为若干个固定类. IP地址由网络标识字段(netID)和主机标识字段(hostID)组成.IP地址可以标识为: IP地址:: = { <网络标识>,<主机 ...
- 1.2 为Eclipse绑定Tomcat
1.window→preferences打开属性窗口 2.点击add 3.点击Tomcat6.0 点击next 4.选择tomcat的解压目录和jdk,并点击finish 5.点击ok 6.打开ser ...
- nodejs-NPM基本使用
搜索模块 npm search express 更新模块 npm update express 卸载模块 npm uninstall express 安装模块 npm install express ...
- HDU 4350
最近这些天,确实很烦恼.因为发现自己好像无论怎么样努力,也赶不上那些强校的学生.不得不承认,我们是传统弱校了.停了有一周了,什么也不想写,不停的反思,到底自己在哪里比不上人.D说,那是因为自始至终你只 ...
- PHP--规范化的文件上传
<form action="" method="post" enctype="multipart/form-data"> < ...
- chmod和chown命令具体使用方法
Linux下数字表示文件的操作权限(777,755,..) Linux下.查看某路径下用(ls -l)查看全部文件的具体属性列表时.会看到文件的操作权限.类似"drwxr-xr-x" ...
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
代码: 效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/ ...