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. VMware中虚拟机与主机不能ping通解决办法

    先去看看服务全部启动了没? VMware相关服务启动关闭脚本     启动了还报错,接着往下看......     一.如果是桥接模式,那么 可能性1:虚拟机防火墙禁ping,请关闭虚拟机防火墙重试: ...

  2. 1154:LETTERS

    题目链接http://bailian.openjudge.cn/practice/1154/ 总时间限制: 1000ms 内存限制: 65536kB 描述 A single-player game i ...

  3. 百度富文本编辑器整合fastdfs文件服务器上传

    技术:springboot+maven+ueditor   概述 百度富文本整合fastdfs文件服务器上传 详细 代码下载:http://www.demodashi.com/demo/15008.h ...

  4. php : 文件及文件夹操作(创建、删除、移动、复制)

    Talk is cheap, show you the code : <?php /** * 操纵文件类 * */ class FileUtil { /** * 建立文件夹 * * @param ...

  5. Emacs 不将M-Del删除的单词加入粘贴板

    原文:https://jblevins.org/log/clipboard I use a clipboard manager called Copied that syncs previously ...

  6. Ubuntu16.04安装串口调试工具gtkterm

    gtkterm是一个用GTK+写的串口终端. 安装:sudo apt install gtkterm 配置文件的位置为:~/.gtktermrc [default] port = /dev/ttyUS ...

  7. 【Python】解析Python的缩进规则

    Python中的缩进(Indentation)决定了代码的作用域范围.这一点和传统的c/c++有很大的不同(传统的c/c++使用花括号花括号{}符决定作用域的范围:python使用缩进空格来表示作用域 ...

  8. kalman滤波

    kalman滤波原理(通俗易懂) 1. 在学习卡尔曼滤波器之前,首先看看为什么叫“卡尔曼”.跟其他著名的理论(例如傅立叶变换,泰勒级数等等)一样,卡尔曼也是一个人的名字,而跟他们不同的是,他是个现代人 ...

  9. 说说erlang tuple和record结构

    erlang有两种复合结构.tuple和list,两者的区别是tuple子元素的个数是固定不变的.声明后就不能改变了.而list是可变的,能够通过[H|T]来取出或插入新元素. record有点像C/ ...

  10. 论如何优雅的自定义ThreadPoolExecutor线程池

    更好的markDown阅读体验可直接访问我的CSDN博客:https://blog.csdn.net/u012881584/article/details/85221635 前言 线程池想必大家也都用 ...