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. 00070_Calendar

    1.Calendar类概念 (1)Calendar是日历类,在Date后出现,替换掉了许多Date的方法.该类将所有可能用到的时间信息封装为静态成员变量,方便获取: (2)Calendar为抽象类,由 ...

  2. N - 畅通工程再续

    N - 畅通工程再续 思路:zz #include<cmath> #include<cstdio> #include<cstring> #include<io ...

  3. [Design]制作磨砂效果

    比较适合运用到网页或者APP的设计当中,推荐过来和飞特的朋友们一起分享学习了,先来看看最终的效果图吧 具体的制作步骤如下:

  4. 《Javascript权威指南》学习笔记之十五:BOM之源---window对象

    BOM是Browser Object Model的缩写,即浏览器对象模型,提供了独立于网页内容和浏览器窗体之间进行交互的APi.API由若干对象组成,因为浏览器是Javascript的宿主,因此,这些 ...

  5. HTML5实现歌词同步

    开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就能够实现视频播放.相似地,在HTML5中也有相应的处理音频文件的标签,那就是audio标签 在线Demo audio ...

  6. HDU 2732 Leapin&#39; Lizards(拆点+最大流)

    HDU 2732 Leapin' Lizards 题目链接 题意:有一些蜥蜴在一个迷宫里面,有一个跳跃力表示能跳到多远的柱子,然后每根柱子最多被跳一定次数,求这些蜥蜴还有多少是不管怎样都逃不出来的. ...

  7. JavaScript 中对变量和函数声明提前的演示样例

    如题所看到的,看以下的演示样例(能够使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发人员工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter能够中途代码 ...

  8. 使用rsync同步数据(by quqi99)

    作者:张华  发表于:2015-12-28版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 急需使 ...

  9. MyEclipse2015安装SVN插件

    一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在打开的网 ...

  10. ES内存持续上升问题定位

      https://discuss.elastic.co/t/memory-usage-of-the-machine-with-es-is-continuously-increasing/23537/ ...