Jquery点击任意地方隐藏div

最新推荐文章于 2024-05-02 17:59:36 发布
最新推荐文章于 2024-05-02 17:59:36 发布
阅读量85 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zijian6/p/5766995.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css">
<style>
	.lia-content{
		width: 500px;
		height: 500px;
	}
	.lia-component-custom-share .share-title{
		color: #0057c0;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		display: block;
	}
	.lia-component-custom-share .social-icons{
		display: none;
		background-color: #fff;
		border-radius: 2px;
		position: absolute;
		left: 10px;
		padding: 5px 0;
		margin: 2px 0 0;
		border: 1px solid #d1d1d1;
		border-radius: 4px;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
		background-clip: padding-box;
	}
	.lia-component-custom-share .social-icons li{
		display: block;
	}
	.lia-component-custom-share .social-icons li a{
		display: block;
		padding: 3px 20px;
		color: #000;
		text-decoration: none;
	}

	.lia-component-custom-share .social-icons li a:hover{
		background-color: #e9faff;
	}
	
	.lia-component-custom-share.active .social-icons{
		display: block;
	}
	.lia-component-custom-share .share-title:after{
		display: inline-block;
		font: normal normal normal 14px/1 FontAwesome;
		content: "\f107";
		color: #0057c0;
		margin-left: 4px;
	}
</style>
<body id="lia-body">
	<div class="lia-content">

		<div class="lia-component-custom-share">
			<span class="share-title">Share</span>
			<ul class="social-icons">		
				<li class="twitter"><a target="_blank" href=""><i class="icon icon-twitter"></i> Twitter</a></li>
				<li class="facebook"><a target="_blank" href=""><i class="icon icon-facebook"></i> FaceBook</a></li>
				<li class="linkedin"><a target="_blank" href=""><i class="icon icon-linkedin"></i> Linkedin</a></li>
			</ul>
		</div>

	</div>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
		$(function(){
			//不是最佳方法 2016年8月13日
			//最佳方案应该使用$.contains这个
			var $shareWrapper = $('#lia-body .lia-content .lia-component-custom-share');
			$shareWrapper.find('.share-title').on('click',function(e){
				//你要是冒泡了我还玩什么
				e.stopPropagation();
				$shareWrapper.toggleClass('active');
			});

			$('body').on('click',function(){
				$shareWrapper.removeClass('active');
			});
		})
	</script>
</body>
</html>

 

谨以此记录学习过程中遇到的问题、也许就有人看了呢，嘿嘿。

转载于:https://www.cnblogs.com/zijian6/p/5766995.html

weixin_30501857
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。
06-07
jQuery实现点击除了特定div的页面其它地方，隐藏该div功能。 在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息，思路一中div的click事件处理程序传入的参数就是这个event对象。访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在。 event对象包含了一个重要属性：target(W3C)/srcElement(IE)，这个属性标识了触发事件的原始元素，思路二就是要利用这个属性。我们可以直接对document的click事件绑定事件处理程序，在事件处理程序中判读事件源是否为id==test的div元素或其子元素，如果是则方法return不做操作，如果不是则隐藏该div。 参考文档：http://blog.csdn.net/u014175572/article/details/51602502
jQuery实现点击其他地方div隐藏
weixin_37212349的博客
04-23 655
$(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟节点，防止点击的是div子元素 if (elem.id && elem.id == 'test') { ret
jquery点击页面其他位置隐藏div
weixin_30602505的博客
04-30 134
//设置 document.onclick = function (e) { $("#setUp").hide(); } $('#btnAdd').on("click", function (e) { $("#setUp").toggle(); e = e || event; s...
jquery实现除指定区域外点击任何地方隐藏DIV
weixin_30340775的博客
06-14 152
<!--弹出的表情选择框--> <div class="layui-input-block expression-box"> </div> <div class="layui-input-block" style="width: 600px; margin: 0 auto; border-left: 1px solid #4a4f58;...
jquery除指定区域外点击任何地方隐藏DIV
老蔡学代码
08-24 663
html如下： &lt;div class="btn" id="btn"&gt;btn&lt;/div&gt; &lt;div class="box"&gt;&lt;/div&gt; jquery（法一）如下： $('.btn').on('click',function(e){ $('.box').show(); e.stopPropagation(); })
jQuery随便控制任意div隐藏的方法
12-03
代码如下:<!DOCTYPE html><...<head> <style> div { background:#ece023; width:30px; height:40px;... <div>a</div> <div>b</div> <div>c</div> <div>d</div> <div>e</div> <div>f</di
jQuery点击页面其他部分隐藏下拉菜单功能
12-29
 web页面中，我们一般不用select、option来实现下拉菜单效果，因为下拉框的样式丑且难以美化，所以我们选择控制ul显示隐藏来实现同样且高大上的效果，但是不能像下拉框那样点击页面其他部分，下拉菜单收起或隐藏，...
jquery如何实现点击空白处隐藏元素
11-30
我们在网站开发的时候经常会有点击空白处去隐藏已有的元素，DIV或者其他，本次教给大家如何用jquery实现这个特效的方法。 一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码...
jQuery详细教程
04-25
演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数，隐藏所有 <p> 元素。 $(".test").hide() 演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 jQuery 语法 ...
jquery 点击其他地方隐藏div
a976134036的博客
01-25 3384
&amp;lt;i class=&quot;layui-icon operationbtn&quot; style=&quot;float: right&quot;&amp;gt;&amp;amp;#xe671;&amp;lt;/i&amp;gt; &amp;lt;ul style=&quot;position: absolute;display: block;&quot; class=&quot;op
JQuery实现点击div以外的位置隐藏该div窗口
10-26
鼠标点击div外的地方让div窗口隐藏消失，实现方法有很多，在本文将为大家介绍下jquery中时如何实现的，感兴趣的朋友不要错过了哈
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
11-23
本文实例讲述了jquery实现点击其他区域时隐藏下拉div和遮罩层的方法。分享给大家供大家参考，具体如下： 为了更好的用户体验，在做下拉获取其他有弹出层的时候，当展开下拉时，要做到点击其他区域也能自动隐藏收起下拉和遮罩层，这样的效果用一段js就可以了。 以下图为例的一个下拉菜单为参考： 效果实现源码： $(document).bind('click', function(e) { var e = e || window.event; //浏览器兼容性 var elem = e.target || e.srcElement; while (elem) { //循环判断至跟
点击其他地方隐藏div
Poker Man
12-09 783
点击其他地方隐藏div代码块语法遵循标准markdown代码，例如：//点击其他地方隐藏div $(document).on("click",function(e){ if($(e.target).parents(".info-box").length == 0){ $(".jq_hidebox").addClass("hide"); } }); info-box是父
JQuery点击指定区域外的任何地方隐藏DIV
似水流年
12-26 1857
参考网上方法： //方法一：         $('body').click(function(e) {             var target = $(e.target);             // 如果#overlay或者#btn下面还有子元素，可使用             // !target.is('#btn *') &amp;&amp; !target.is('#overl...
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 804
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 374
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
bpmn-js推荐几款常用的插件
飞云先生
04-30 76
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 797
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
最新发布
weixin_54339833的博客
05-02 204
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
jquery点击按钮DIV隐藏
07-27
在使用jQuery实现点击按钮隐藏DIV的功能时，可以使用以下代码： ```javascript $(document).ready(function(){ $("#wsView").click(function() { $("#secondMenu").toggle('slow'); }); }); ``` 这段代码中，`#...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值