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. 【算法随记】Canny边缘检测算法实现和优化分析。

    以前的博文大部分都写的非常详细,有很多分析过程,不过写起来确实很累人,一般一篇好的文章要整理个三四天,但是,时间越来越紧张,后续的一些算法可能就以随记的方式,把实现过程的一些比较容易出错和有价值的细节 ...

  2. GDAL多光谱与全色图像融合简单使用

    目录 简述 C++代码 效果对比 GDAL融合效果和原始多光谱波段对比 GDAL融合效果和原始全色波段对比 ARCGIS融合效果与原始全色和多光谱对比 GDAL融合效果与ArcGIS融合效果对比 简述 ...

  3. Docker 的插件式设计

    http://www.tuicool.com/articles/MnIRZvJ http://uzhima.com/2016/08/02/what-is-docker-volume-plugin/ 在 ...

  4. golang 类型转换

    import ( "bytes" "encoding/binary" "encoding/gob" "fmt" ) fu ...

  5. Windows利用文件夹映射来同步文件

    在windows服务器上有时有这样的需求: 你的文件在f:\test中,但由于其它原因用户访问的是e:\test,如果又希望e:\test 中的文件与f:\test的保持同步,除了用同步软件来做外,可 ...

  6. Nmap备忘单

    #在推特上看到,感觉做的相当不错就转一波. 目标规格 开关 例 描述   nmap 192.168.1.1 扫描一个IP   nmap 192.168.1.1 192.168.2.1 扫描特定的IP地 ...

  7. CentOS 7下PXE+Kickstart无人值守安装操作系统

    1.简介 1.1. 什么是PXE PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支 ...

  8. 链接学习之obj文件探索

    Windows的gcc环境,往官网http://sourceforge.net/project/showfiles.php?group_id=2435 下载MinGW,安装,安装完毕后按照包 配置环境 ...

  9. 博客搬家了,新域名dinphy.wang

    博客搬家了,新域名      dinphy.wang 博客搬家了,新域名      www.dinphy.wang 博客搬家了,新域名      dinphy.wang 博客搬家了,新域名     w ...

  10. MySQL中TEXT与BLOB字段类型的区别

    这篇文章主要介绍了MySQL中TEXT与BLOB字段类型的区别,本文总结了6大区别,需要的朋友可以参考下   在MySQL中有两个字段类型容易让人感觉混淆,那就是TEXT与BLOB,特别是自己写博客程 ...