jq 点击按钮显示div,点击页面其他任何地方隐藏div
css
.bl_rencai_32{
float: left;
height: 35px;
line-height: 35px;
}
.bl_rencai_32 >input{
width: 30px;
height: 18px;
padding: 0px 5px;
margin-top: -3px;
}
.bl_rencai_32 a{
display: none;
background-color: #FF6600;
text-align: center;
padding: 3px 8px;
color: #fff;
border-radius: 3px;
margin-left: 10px;
}
.bl_rencai_32 a:hover{
background-color: #ff552e;
}
html
<div class="bl_rencai_32">
<input type="text" name="" value="">
<span>-</span>
<input type="text" name="" value="">
<span>岁</span>
<a href="" class="bl_rencai_32_ashow">筛选</a>
</div>
jq
/*输入年龄段 点击显示 筛选按钮 并 点击其他地方时筛选按钮隐藏*/
$('.bl_rencai_32 input').on('click',function(e){
$('.bl_rencai_32_ashow').show();
$(document).one('click',function(){
$('.bl_rencai_32_ashow').hide();
})
e.stopPropagation();/*stopPropagation();方法可以阻止把事件分派到其他节点*/
})
借鉴网址:https://blog.csdn.net/YangBingX/article/details/78644486 (他的这里面有原生JS的方法)
jq 点击按钮显示div,点击页面其他任何地方隐藏div的更多相关文章
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- js实现点击按钮显示某个区域 然后点击页面中任意其他位置,隐藏该区域
$(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...
- React 点击按钮显示div与隐藏div,并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- JavaScript点击按钮显示 确认对话框
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- jquery实现除指定区域外点击任何地方隐藏DIV
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...
- 点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决?
点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...
- js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
随机推荐
- IDEA修改JDK(全)
https://www.cnblogs.com/hkgov/p/8074085.html 解决:javac: 无效的目标发行版: 1.8 解决:项目JDK版本不对 解决:Jar包问题 1," ...
- PHP判断一个JSON对象是否含有某一个属性的方法
property_exists比如:var json={"code":400,"msg":"User Err"} var rest=prop ...
- linux随机数生成
随机数多应用在密码的随机生成 #随机数生成 $RANDOM (1-32767) 11.内部系统变量($RANDOM) 1-32767 22. awk 'BEGIN{srand();print rand ...
- 【MySQL】MySQL中查询出数据表中存在重复的值list
1.目的:查询MySQL数据表中,重复记录的值 2.示例: 3.代码: select serial_num,count(*) as count FROM card_ticket GROUP BY se ...
- iOS CALayer 绘图模糊有锯齿的解决方案
在CALayer中绘制图形会出现锯齿和模糊,同样绘图在UIView中就没有问题.经查资料发现不自动处理两倍像素的情况. 解决方案为:设置layer的contentsScale属性为[[UIScreen ...
- 【转载】linux系统时间自动同步:ntp
NTP基本介绍 NTP(Network TimeProtocol,网络时间协议),使用来使本地机器与服务端机器时间保持同步的一种协议.如果我们只有一台机器那么只需要安装NTP客户端ntpdate这个包 ...
- ThreadPoolExcutor 线程池 异常处理 (下篇)
前言 因为这是之前面试的一个题目,所以印象比较深刻,前几天写了一篇文章:ThreadPoolExcutor 线程池 异常处理 (上篇) 中已经介绍了线程池异常的一些问题以及一步步分析了里面的一些源代码 ...
- mysql 按照月份自动创建表,以年和月为表明,动态生成。
需求:mysql5.5 数据库,想要根据月份自动创建表,每个月创建一张表,需要数据库自动创建,并根据当前年和月动态生成表名称. 解决办法:1 连接数据库工具为Navicat 2 首先创建存储过程, ...
- 移动开发常用meta设置
<!-- 视图窗口,移动端特属的标签. --> <meta name="viewport" content="width=device-width,in ...
- Jquery on方法绑定事件后执行多次
每次绑定前先取消上次的绑定. $('#sub').unbind('click').click(function () { ... });