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>云蚂 ...
随机推荐
- jquery 多级联动下拉列表含(数据模型)
方法 /** * 级联 * 联动 * @param url:访问json数据的地址 * @param param:参数 * @param levelIds:页面下拉标签数组,为联动级数 * @priv ...
- [Vuex] Perform Async Updates using Vuex Actions with TypeScript
Mutations perform synchronous modifications to the state, but when it comes to make an asynchronous ...
- CentOS7通过rsync+crontab实现两台服务器文件同步
centos7系统中已经默认安装rsync 1:主服务器配置 (1)修改rsyncd.conf 配置文件 [root@localhost app]# vi /etc/rsyncd.conf motd ...
- nrm管理npm源
npm源:npm install命令下载需要依赖包的服务器地址,默认是 npm ---- https://registry.npmjs.org/ 而国外的源速度太慢,所以我们一般都用国内的淘宝源tao ...
- Visual Studio进行Web性能测试- Part III
Visual Studio进行Web性能测试- Part III 原文作者:Ambily.raj 对于一个多用户的应用程序,性能是非常重要的.性能不仅是执行的速度,它包括负载和并发方面.Visual ...
- 华为ap3010DN-V2刷出胖AP并配置接入POE交换机实现上网
配置FAT AP二层组网示例 组网图形 图1 配置二层网络WLAN基本业务示例组网图 组网需求 如图1所示,FAT AP通过有线方式接入Internet,通过无线方式连接终端.现某企业分支机构为了保证 ...
- 使用h5py操作hdf5文件
HDF(Hierarchical Data Format)指一种为存储和处理大容量科学数据设计的文件格式及相应库文件.HDF 最早由美国国家超级计算应用中心 NCSA 开发,目前在非盈利组织 HDF ...
- SNF软件开发机器人-子系统-导出-导入功能-多人合作时这个功能经常用到
导出 导出可以将资源表和子系统导出并形成一个json文件. 1.效果展示: 2.使用说明: 点击导出按钮后会弹出一个导出页面.页面的左侧可以选择功能,右侧可以选择资源表,选择功能的同时右侧中功能所需的 ...
- Linux服务器CPU使用率较低但负载较高
CPU使用率较低但负载较高 问题描述 Linux 系统没有业务程序运行,通过 top 观察,类似如下图所示,CPU 很空闲,但是 load average 却非常高,如下图所示. 处理办法 load ...
- 性能测试工具--SIEGE安装及使用简介 siege压力测试
官方网站http://www.joedog.org/ 概述 Siege是一个多线程http负载测试和基准测试工具.它有3种操作模式: 1) Regression (when invoked by bo ...