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 ...
随机推荐
- 【机器学习基础】熵、KL散度、交叉熵
熵(entropy).KL 散度(Kullback-Leibler (KL) divergence)和交叉熵(cross-entropy)在机器学习的很多地方会用到.比如在决策树模型使用信息增益来选择 ...
- flutter初体验
flutter初体验 和flutter斗争了两个周末,基本弄清楚了这个玩意的布局和一些常用组件了. 在flutter里面,所有东西都是组件Widget.我们像拼接积木一样拼接Widget,拼接的关键词 ...
- Nginx技术进阶详讲
Nginx技术进阶详讲 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 并发数问题 讲到并发数这个概念,想必各位应该都知道是什么意思,就是同时访问一个项目,就比我们现在做的一些项目完 ...
- Asp.Net Core 轻松学-经常使用异步的你,可能需要看看这个文章
前言 事情的起因是由于一段简单的数据库连接代码引起,这段代码从语法上看,是没有任何问题:但是就是莫名其妙的报错了,这段代码极其简单,就是打开数据库连接,读取一条记录,然后立即更新到数据库中.但是,惨痛 ...
- openlayers4 入门开发系列之地图标绘篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- android Fragment中使用Toolbar
在Activity中可以直接使用 setSupportActionBar(toolbar); 就可以重写 onCreateOptionsMenu 和 onOptionsItemSelected 方法: ...
- Appium的入门使用
ps:有没有人和我一样觉得Appium官方文档写的很烂的, 这官方文档,还不如很多人写的博客详细,而且对于初学的入门者实在是不够友好, 官网:https://github.com/appium/jav ...
- express+handlebars 快速搭建网站前后台
最近在重构公司网站,原来网站使用PHP,前后端不分离,添加与更新网站内容仍使用原始方法,先出布局再把调好的布局给PHP后端开发,花时间长,维护不易.因此决定将网站前后端分离,核心功能含网站下单及CRM ...
- helm 持久化部署ingres
Ingress 是一种 Kubernetes 资源,也是将 Kubernetes 集群内服务暴露到外部的一种方式.本文将讲一讲如何用 Helm 在 Kubernetes 集群中部署 Ingress,并 ...
- SQL执行WebService
写了一个钉钉发送消息的类, 要发送用友等审核单据信息, 模式: 钉钉发消息功能在webservice中, 用友消息列表中有新消息时,采用触发器执行webservice. 在测试中 ,功能正常 ,但将在 ...