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 ...
随机推荐
- PHP中isset和empty的区别(最后总结)
PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在 ...
- 第6章 Overlapped I/O, 在你身后变戏法 ---被激发的 Event 对象 -4
以文件 handle 作为激发机制,有一个明显的限制,那就是没办法说出到底是哪一个 overlapped 操作完成了.如果每个文件 handle 只有一个操作等待决定,上述问题其实并不成为问题.但是如 ...
- 用es6的class关键字定义一个类
es6新增class关键字使用方法详解. 通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法 ...
- BGP协议
BGP属于自治系统间路由协议.BGP的主要目标是为处于不同AS中的路由器之间进行路由信息通信提供保障.BGP既不是纯粹的矢量距离协议,也不是纯粹的链路状态协议,通常被称为通路向量路由协议.这是因为BG ...
- spring框架总结(01)
1.spring是什么? sprint其实就是一个开源框架,是于2003年兴起的一个轻量级的java开发框架,是有Road Johnson创建的,简单的来说spring是一个分层的JavaSE/EE( ...
- Python数据分析流程
一.数据分析的步骤: 1.查看数据并提出问题 2.数据清洗 3.代码编写,提取出结果数据,并分析是否有异常数据,修改代码 4.根据数据选择合适的图表进行展示 5.根据图表小组讨论交流获得最终的结果 二 ...
- 使用python操作mysql
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7643047.html 作者:窗户 Q ...
- Java web AJAX入门
一:AJAX简介 AJAX :Asynchronous JavaScript And XML 指异步 JavaScript 及 XML 一种日渐流行的Web编程方式 Better Faster Use ...
- springboot高并发redis细粒度加锁(key粒度加锁)
本文探讨在web开发中如何解决并发访问带来的数据同步问题. 1.需求: 通过REST接口请求并发访问redis,例如:将key=fusor:${order_id} 中的值+1: 2.场景: 设想,多线 ...
- iptables使用实践
1.iptables 本质上是一组规则,报文从端口接收到之后,按照规则的顺序进行匹配,一旦匹配上则执行动作,后续就不再匹配. 2.为了体现出优先级,iptable分为4个表,5个链,如下: 优先级顺序 ...