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 ...
随机推荐
- Opengl4.5 中文手册—F
索引 A B C D E F G H I J K L M N O P Q ...
- Oculus Store游戏下载默认路径修改方法
最近在测试一款VR游戏,所以在硬件设备上选择了HTC Vive和Oculus两款眼镜.相对而言,HTC安装比较人性化:支持自定义安装路径,而且可在界面更改应用程序下载位置,如图所示: 这下替我节省了不 ...
- 使用Xshell+Xmanager远程监控jvisualvm
使用jvisualvm的remote方式监控服务器端jvisualvm时,不是很方便,因此通过local方式,应该是正路. 一.服务器端(Linux,最小安装模式,没有图形界面) 1.安装xauth ...
- 大牛教你用3行HTML代码卡死一台机器
前言 学习web渗透测试等安全工作的朋友们,想必大部分接触的最早的就是HTML了. 其实学过html的朋友们都知道,html中可以插入JavaScript代码,而对于JavaScript代码,这里就不 ...
- Day3 Python基础学习——文件操作、函数
一.文件操作 1.对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 #打开文件,读写文件,关闭文件 http://www.cnblogs.com/linha ...
- httpd日志和日志轮替工具
html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...
- Python自学笔记-Django分页器小实例
from django.core.paginator import Paginator iter = 'abcdefhijklmnopqw' paginator = Paginator(iter,4) ...
- mysq参数sql_safe_updates限制范围
在mysql运维中出现过不少因为update/delete条件错误导致数据被误更新或者删除的case,为避免类似问题的发生,可以用sql_safe_updates参数来对update/delete做限 ...
- HDU1197 Specialized Four-Digit Numbers
进制转化 hdu1197 #include<cstdio> #include<cstdlib> #include<iostream> #include<mem ...
- C#线程池多线程Socket通讯 服务器端和客户端示例
using System; using System.Net; using System.Net.Sockets; using System.Text; using System.Threading; ...