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点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层的更多相关文章

  1. 关于JavaScript点击按钮打开多个页面被浏览器以广告嫌疑拦截怎么解决

    JS点击按钮打开新的标签页,工作中遇到需要点击按钮打开一个或多个,需要用到window.open() 工作中我们可能需要打开多个,看以下代码: var data = [{ "id" ...

  2. 新建一个Activity通过按钮打开它,再通过按钮关闭它

    首先需要创建一个供打开和关闭的Activity,先在scr下当前项目的包中创建一个新类Activity1, 并选择让其继承自Activity类,如下图所示: 之后配置AndroidMainifest. ...

  3. vue自己写了一个div菜单,点击按钮展开,点击其他地方关闭这个div菜单

    需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...

  4. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  5. jeecg 弹出框 点击按钮回调父页面 返回值

    jeecg 弹出框 点击按钮回调父页面 返回值 <t:base type="jquery"></t:base> <t:base type=" ...

  6. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  7. bootstrap 弹出框点击其他区域时弹出框不消失选项设置

    默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

  8. Android编程实现点击链接打开APP功能示例

    本文实例讲述了Android编程实现点击链接打开APP功能.分享给大家供大家参考,具体如下: 在Android中点击链接打开APP是一个很常见的需求.例如,电商为用户发送优惠券之后经常会下发一条短信: ...

  9. 报错:已有打开的与此命令相关联的 DataReader,必须首先将它关闭。

    SqlParameter[] sp = { new SqlParameter("@nGridID",SqlDbType.BigInt), new SqlParameter(&quo ...

随机推荐

  1. 原生js实现form表单序列化

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  2. python 操作jenkins 常用api

    Python-Jenkins 继续寻找,然后我在Jenkins官网上找到了Python-Jenkins API,仔细阅读后发现,它几乎涵盖了大部分Jenkins的操作,大大方便了我们在后台进行对Jen ...

  3. leetCode笔记--(1)

    陪朋友刷题,记录下. 1.Evaluate the value of an arithmetic expression in Reverse Polish Notation.Valid operato ...

  4. 使用gson进行数据(集合数据)的转换 并且返回给前端 进行动态解析 并添加

    后台使用gson转换工具把list集合数据 以json字符串的方式返回给前台 解压: 加入到工程中 前台页面进行数据解析时  需要把得到的字符串  转换为object数组 -------------- ...

  5. C#中的Socket

    ];//用于缓存客户端所发送的信息,通过socket传递的信息必须为字节数组 IPEndPoint ipep = new IPEndPoint(IPAddress.Any, 9050);//本机预使用 ...

  6. BA-Honeywell WEBsAX系统

  7. BA-siemens-TX-IO模块照片

    西门子楼宇自控用到的P1模块是这样的 TX-16D模块是这样的 TX-8X模块是这样的: TX-6R模块是这样的: TX-IO总线连接模块( 此模块供电和通讯加起来共需三芯线):

  8. 初学JavaScript之推測new操作符的原理

    本文是一篇原理推測的文章,假设有不准确的地方请指正, 原文:http://blog.csdn.net/softmanfly/article/details/34833931 JavaScript中构造 ...

  9. HDU 1042.N!【高精度乘法】【8月24】

    N! Problem Description Given an integer N(0 ≤ N ≤ 10000), your task is to calculate N!   Input One N ...

  10. 2015.04.19,外语,读书笔记-《Word Power Made Easy》 11 “如何辱骂敌人” SESSION 29

    1.the French drillmaster 法国国王路易十五手下的Jean Martinet将军,是Infantry(['infәntri] n. 步兵)的检察长,是一个非常严格的drillma ...