jQuery点击下拉菜单的展示与隐藏
首先点击显示某个div,然后要求再次点击时消失,或者点击document的其他地方会隐藏掉这个层,涉及到冒泡的问题,阻止document冒泡到dom上。代码如下:
var $el = $(".search-more, .article-query-list li");
$el.click(function(e){
e.stopPropagation();
$(this).toggleClass('active');
});
$(document).on('click',function(e){
if(($(e.target) != $el) && ($el.hasClass('active'))){
$el.removeClass('active');
// console.log("yes");
}
});
jQuery点击下拉菜单的展示与隐藏的更多相关文章
- jquery实现多级下拉菜单
支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
- jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
- js和jQuery写简单下拉菜单
1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...
- JQuery设置获取下拉菜单选项的值 多实例
分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...
- 基于jquery网站左侧下拉菜单
网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="container"& ...
- javascript实现下拉菜单的显示与隐藏
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- jquery 只有二级下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery cxSelect 联动下拉菜单
插件简介 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取,也可以自定义,数据内容使用 JSON 格式. 同时兼容 Zepto ...
- jquery mobile selectmenu下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
随机推荐
- 我是如何利用Hadoop做大规模日志压缩的
背景 刚毕业那几年有幸进入了当时非常热门的某社交网站,在数据平台部从事大数据开发相关的工作.从日志收集.存储.数据仓库建设.数据统计.数据展示都接触了一遍,比较早的赶上了大数据热这波浪潮.虽然今天的人 ...
- 关于Vue问题记录
第一次安装Vue时,npm run dev报错处理 1.如果是报错:提示说没找到test这个文件夹 参考资料:https://segmentfault.com/q/1010000010893904 就 ...
- 第6章 Overlapped I/O, 在你身后变戏法 ---被激发的 File Handles -3
最简单的 overlapped I/O 类型,是使用它自己的文件 handle 作为同步机制.首先你以 FILE_FLAG_OVERLAPPED 告诉 Win32 说你不要使用默认的同步 I/O.然后 ...
- Java钉钉开发_02_免登授权(身份验证)(附源码)
源码已上传GitHub: https://github.com/shirayner/DingTalk_Demo 一.本节要点 1.免登授权的流程 (1)签名校验 (2)获取code,并传到后台 (3) ...
- Redis 的安装与使用
环境:CentOS 6.6 Redis 版本:redis-3.0 (考虑到 Redis3.0 在集群和性能提升方面的特性,rc 版为正式版的候选版,而且很快就出正式版) 安装目录:/usr/local ...
- python---time模块使用详解
python中的time模块提供一些方法用来进行关于时间的操作,time模块中有以下方法可供使用: time() --- 返回当前时间的时间戳. 调用:time.time(), 可用于计算程序运行的 ...
- PHP抓取网页图片
<?php set_time_limit(0);//抓取不受时间限制 if($_POST['Submit']=="开始抓取"){ $URL=$_POST['link']; g ...
- Elixir游戏服设计四
上章说到我们要引入syn https://github.com/ostinelli/syn/ 看过文档,它并没有直接提供{via, Module, Name} 相关的方法.我们需要封装一下. Name ...
- Django 1.10中文文档-聚合
Django 数据库抽象API 描述了使用Django 查询来增删查改单个对象的方法. 然而,有时候你要获取的值需要根据一组对象聚合后才能得到. 这个主题指南描述了如何使用Django的查询来生成和返 ...
- Opencv如何捕获摄像头视频-OpenCV步步精深
捕获摄像头实时图像 这一点非常非常重要,因为这一点关乎了以后我们进行各种各样的识别(人脸识别,车牌识别等等有趣的识别).opencv提供了一个接口,可以轻松的让我们实现这个功能.我们先来看一段代码,根 ...