js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
<script>
//定义stopPropagation 方法的使用,该方法将停止事件的传播,阻止它被分派到其他 Document 节点。
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
};
//获取元素的ID
function $(id) {
return document.getElementById(id);
};
//初始化加载
window.onload = function () {
document.onclick = function (e) {
$("element").style.display = "none";
}
$("btn按钮").onclick = function (e) {
$("element").style.display = "block";
e = e || event;
stopFunc(e);
}
$("element").onclick = function (e) {
e = e || event; stopFunc(e);
}
}
</script>
<script>
$("#btn按钮").on("click", function(e){
$("#element").show();
$("#element").hide();
});
});
</script>
js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div的更多相关文章
- jq 点击按钮显示div,点击页面其他任何地方隐藏div
css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...
- PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...
- 点击其它地方隐藏div/事件冒泡/sweet-alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- js点击button按钮跳转到另一个新页面
点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢? 这样的效果可以:onclick=&q ...
- 点击页面其它地方隐藏div所想到的jQuery的delegate
在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始, ...
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML交互——事件,这不是本文重点,所以这里只是简单介绍一下事件 ...
- js - 使用jquery发送前台请求给服务器,并显示数据
1.使用jquery发送前台请求给服务器,并显示数据 <%@ page contentType="text/html;charset=UTF-8" language=&quo ...
- vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框
效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...
- H5点击不同按钮跳转显示不同分页
预期效果(页面1): 点击后显示对应的内容(页面2): HTML(页面1): 添加 onclick 跟 data-index <!-- 3我的订单 --> <div ...
随机推荐
- java Dated Dateformat Calendar
Date类概述 类Date表示特定的瞬间,精确到毫秒.1000毫秒=1秒 时间的原点:公元1970年 一月一日,午夜0:00:00 对应的毫秒值就是0 注意:时间和日期的计算,必须依赖毫秒值 long ...
- css3新增动画
1.transiition过渡:样式改变就会执行transition (1)格式:transiition:1s width linear,2s 1s height; (2)参数: transition ...
- 跳动在网页中间的精灵----Javascript
今天开始js的内容整理,跳动在网页里的精灵就是它了. 一.简介 1.什么是Javascript JavaScript 是一种具有面向对象能力的.解释型的程序设计语言.更具体一点,它是基于对象和事件驱动 ...
- LDA && NCA: 降维与度量学习
已迁移到我新博客,阅读体验更佳LDA && NCA: 降维与度量学习 代码实现放在我的github上:click me 一.Linear Discriminant Analysis(L ...
- 入门系列之在Ubuntu 16.04使用Buildbot建立持续集成系统
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由angel_郁发表于云+社区专栏 介绍 Buildbot是一个基于Python的持续集成系统,用于自动化软件构建,测试和发布过程. 在 ...
- 记ibatis使用动态列查询问题(remapresults)
今天在项目开发中,遇到了一个问题:使用ibatis 动态查询列时,每次返回的结果列都是第一次查询的结果列,然而控制台执行的SQL语句时包含该结果列的.比如: <select id="g ...
- 如何在你的项目中集成 CAP【手把手视频教程】
前言 之前录制过一期关于CAP的视频,但是由于当时是直播时录制的视频,背景音比较杂所以质量有点差.这次的视频没有直播,直接录制的,视频质量会好很多,第一遍录制完成之后发现播放到一半没有声音,所以又重新 ...
- 多线程工具类:CountDownLatch、CyclicBarrier、Semaphore、LockSupport
◆CountDownLatch◆ 假如有一个任务想要往下执行,但必须要等到其他的任务执行完毕后才可以.比如你想要买套房子,但是呢你现在手上没有钱.你得等这个月工资发了.然后年终奖发了.然后朋友借你得钱 ...
- 由ODI初始化资料档案库(RUC)引起修改ORACLE字符集(ZHS16GBK-AL32UTF8)
如果要部署代理,需要在RUC中进行资料档案库的初始化,这样可以免去配置代理的繁琐.在RUC连接数据库时会有先决条件检查,如果出现下图的警告,就需要在ORACLE中修改字符集. 具体操作如下: 登录SQ ...
- 麒麟子Cocos Creator实用技巧一:如何正确地显示微信头像
不管是游戏App,还是H5,又或者是微信小游戏.但凡接入了微信登录的应用,都可能需要显示微信头像. 在Cocos Creator中,我们常见的显示方法像下面这样 var headimg = 'http ...