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. 前端开发—Javascript

    Javascript 语言简介: 语言规范: 注释:/  这是单行注释 /   /* 换行*/ 多行注释 结束符: :分号 语法基础 变量 变量声明 1 变量名可以是 数字 字母 下划线 $ 组成,不 ...

  2. 如何安全使用公共Wifi,防止信息泄露?

    购物中心,机场,餐厅,咖啡馆,图书馆,公共交通,酒店客房均提供免费无线网络连接,这些网络每天被数百万人使用.然而,大多数人没有意识到的是,免费的公共Wi-Fi并不安全.即使需要密码才能登录,这并不一定 ...

  3. nginx安装http2.0协议

    1.HTTP2协议 HTTP 2.0 的主要目标是改进传输性能,实现低延迟和高吞吐量.从另一方面看,HTTP 的高层协议语义并不会因为这次版本升级而受影响.所有HTTP 首部.值,以及它们的使用场景都 ...

  4. Nginx 的安装 与 启动

    没有图文说明,是我看着视频一步一步照做的,安装过程了,也随便把步骤记录下来了. 我是新装 Linux 服务器,所以安装过程中出现的错误也是第一遇到,希望对你们有所帮助. 也是方便自己以后再次安装 ni ...

  5. vncserve安装与使用

    vncserver安装与配置 1.1.Centos安装 yum install tigervnc-server yum groupinstall "X Window System" ...

  6. mobile touch 备用

    var _scrollIndex=1; function scrollPage(){ var _contentEle = $('.view-container'),_viewEle = _conten ...

  7. spring中的单例和多例

    单例 对象在整个系统中只有一份,所有的请求都用一个对象来处理,如service和dao层的对象一般是单例的. 为什么使用单例:因为没有必要每个请求都新建一个对象的时候,浪费CPU和内存. 多例 对象在 ...

  8. php 将多个txt文件合并成

    function test() { $hostdir= iconv("utf-8","gbk","C:\Users\原万里\Desktop\日常笔记& ...

  9. OC第三天(内存管理)

    内存管理: 1.作用范围: 不论什么继承了NSObject的对象,堆基本数据类型无效如:int a ,float price;;等 2.原理: 每一个对象内部都保存了一个与之相关的整数,称为引用计数器 ...

  10. openssl之EVP系列之2---对称加密算法概述

    openssl之EVP系列之2---对称加密算法概述     ---依据openssl doc/crypto/EVP_EncryptInit.pod和doc/ssleay.txt cipher.doc ...