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的更多相关文章

  1. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  2. js实现点击按钮显示某个区域 然后点击页面中任意其他位置,隐藏该区域

    $(".licat-header-list").on("click",function(e){ $(this).addClass("active&qu ...

  3. React 点击按钮显示div与隐藏div,并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  4. 点击按钮显示隐藏DIV,点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  5. JavaScript点击按钮显示 确认对话框

    //JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  6. 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡

    点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...

  7. jquery实现除指定区域外点击任何地方隐藏DIV

    <!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> &l ...

  8. 点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决?

    点击按钮使用window.open打开页面后,再次点击按钮会再打开一个页面,如何解决? window.open("page1.html","win1"); 这句 ...

  9. js构建函数,点击按钮显示div,再点击按钮或其他区域,隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

随机推荐

  1. Android 仿QQ界面的实现

    废话不说  上图  适合新手学习 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQ ...

  2. JavaScript单独的模块中传递数据

    首先我们来看看这张图,让我们来思考一下! 下买我给出我的完整思路代码 html代码: <!DOCTYPE html> <html lang="zh-CN"> ...

  3. 2-08. 用扑克牌计算24点(25) (ZJU_PAT 数学 枚举)

    题目链接:http://pat.zju.edu.cn/contests/ds/2-08 一副扑克牌的每张牌表示一个数(J.Q.K分别表示11.12.13,两个司令都表示6).任取4张牌.即得到4个1~ ...

  4. jquery动态添加元素无法触发绑定的事件的解决方案

    方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...

  5. PL/SQL学习笔记之包

    一:包 包是由一组相关的函数,过程,变量,游标等PL/SQL程序设计元素的组合而成的一个PL/SQL程序单元,相当于Java中的类. 包的主要作用是封装:把相同或相似的东西归类,方便维护和管理,提高开 ...

  6. phpBB3导入用户的Python脚本

    关联的数据表 在phpBB3中导入用户时, 需要处理的有两张表, 一个是 users, 一个是 user_group. 如果是新安装的论坛, 在每次导入之前, 用以下语句初始化: DELETE FRO ...

  7. Install Redis 3.2 on Ubuntu

    Install Redis 3.2 on Ubuntu It’s very easy to install Redis 3 on Ubuntu 16, just need to add PPA rep ...

  8. Use Dynamic Data Masking to obfuscate your sensitive data

    Data privacy is a major concern today for any organization that manages sensitive data or personally ...

  9. nrm 安装与npm镜像切换

    家里宽带用的移动的...访问海外镜像是相当慢,npm和maven一个道理,maven可以切换到淘宝镜像或者其他的,那么npm也可以使用国内镜像,这个时候就需要用到nrm来做镜像管理了 首先这是目前本地 ...

  10. Linux系统中的常用命令

    查看日志 cat 或 tail -f 日志文件说明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure 与安全 ...