点击页面任何位置隐藏div

<include file="Public:header" />
<style type="text/css">
	table{width:100%;margin: 0;}
</style>
<script type=‘text/javascript‘ src="/{:APP_PATH}/Public/js/unslider.min.js"></script>
	<script type="text/javascript">
	//定义页面载入事件
	/*$(function(){
		$(‘#more‘).addClass(‘moreno‘);
		$(‘#more‘).click(function(){
			//隐藏元素(向左移动)
			if ($(‘#more‘).hasClass(‘moreno‘)) {
				$(‘#sider‘).animate({
				left:0
				},1000,function(){
					$(‘#more‘).removeClass(‘moreno‘);
				});
			}else{
				 $(‘#sider‘).animate({
	          	left:-120
	        },1000,function(){
				$(‘#more‘).addClass(‘moreno‘);
			});
	        }
		});
	});*/
//定义页面载入事件
	$(function(){
		$(‘#more‘).addClass(‘moreno‘);
		//点击界面除了容器id为more的区域外,任何地方隐藏掉
		$(document).click(function(){

		 $(‘#sider‘).animate({
	          	left:-120
	        },1000,function(){
				$(‘#more‘).addClass(‘moreno‘);
			});
		});

		$(‘#more‘).click(function(event){
			event.stopPropagation();
			//隐藏元素(向左移动)
		event.stopPropagation();
			if ($(‘#more‘).hasClass(‘moreno‘)) {
				$(‘#sider‘).animate({
				left:0
				},1000,function(){
					$(‘#more‘).removeClass(‘moreno‘);
				});
			}else{
				 $(‘#sider‘).animate({
	          	left:-120
	        },1000,function(){
				$(‘#more‘).addClass(‘moreno‘);
			});
	        }
		});
	});
	</script>
    <div class="header_one">
       	<div class="Central">
	       	<div class="first_one" style="position:absolute;">
	    		<img  id="more" style="margin-top:8px;" src="/{:APP_PATH}/Public/img/pic/more.png" />
	    	</div>
	    	<div>
       			<img style="height:30px;" src="/{:APP_PATH}/Public/img/main/logo1.png" />
       		</div>
       	</div>
    </div>
    <div class="bg">
	    <div class="pic" style="height:180px;">
	   		<div id="lunbo" style="overflow: hidden;">
		    <ul style="margin:0px;" id="lunboul" style="position: relative;">
		        <volist name="pic" id="vo">
		        	<li style="float:left;text-align:center;">
		        		<img src="{$vo[‘pic‘]}"  style="height:176px;margin:auto;" >
		        	</li>
		        </volist>
		    </ul>
		</div>
	<script type="text/javascript">
	$(‘#lunbo‘).unslider({
		speed: 0,
		delay: 3000,
		complete: function() {},
		keys: true,
		dots: true,
		fluid: false
	});
	function autoScroll(obj){
		$(obj).find("#voo").animate({
			marginTop : "-30px"
		},500,function(){
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
		})
	}
	$(function(){
		setInterval(‘autoScroll("#xst")‘,2000);
	})
	</script>
    </div>
    <div style="width:100%;background-color:#EEEEEE;height:30px;margin:10px 0;">
	    <div class="scroll" id="xst" style="float:right;margin-left:10px;height:30px;width:75%;overflow:hidden;">
			<ul id=‘voo‘ style="margin-top:0px;">
				<volist name=‘gonggao‘ id="vo">
					<li style="line-height:30px;height:30px;padding-left:5px;padding-top:2px;text-align:left;">
						<a href="{:U(‘/Index/PlatDetail‘,array(‘id‘=>$vo[‘id‘]))}">{$vo[‘name‘]}</a>
					</li>
				</volist>
			</ul>

		</div>
		<div style="float:right;margin:5px 0;">
    		最新公告
    	</div>
	</div>
    <table id="fone" onclick="javascript:location.href=‘/Invest/InvestHp/biao_type/love‘">
	   <tr>
		   <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/new.png"/></td>
		   <td class="secon">新手标</td>
		   <td><span class="blo">8-10%</span><span class="tblo">预期年化收益</span></td>
		   <td><span class="blo">7<span class="cao_one">天</span></span><span class="tblo">投资期限</span></td>
		   <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
	   </tr>
    </table>

    <table class="bird" onclick="javascript:location.href=‘/Invest/InvestList/biao_type/yxlc‘">
	   <tr>
		   <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/fast.png" /></td>
		   <td class="secon">快系列</td>
		   <td><span class="blo">8-10%</span><span class="tblo">预期年化收益</span></td>
		   <td><span class="blo">1<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td>
		   <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
	   </tr>
    </table>

    <table class="se_cond" onclick="javascript:location.href=‘/Invest/InvestList/biao_type/gxd‘">
	   <tr>
		   <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/stable.png" /></td>
		   <td class="secon">稳系列</td>
		   <td><span class="blo">12-14%</span><span class="tblo">预期年化收益</span></td>
		   <td><span class="blo">3-6<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td>
		   <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
   		</tr>
    </table>
	<if condition="$GLOBALS[‘userinfo‘][‘org_code‘] eq ‘fc‘">
    <table class="last_fcb" onclick="javascript:location.href=‘/Invest/InvestList/biao_type/fcb‘">
	   <tr>
		   <td class="norrow"><img src="/{:APP_PATH}/Public/img/pic/house.png" /></td>
		   <td class="secon">房产宝</td>
		   <td><span class="blo">8-16%</span><span class="tblo">预期年化收益</span></td>
		   <td><span class="blo">3-6<span class="cao_one">个月</span></span><span class="tblo">投资期限</span></td>
		   <td class="jian_rig"><img class="rig_pic" src="/{:APP_PATH}/Public/img/pic/rightshow.png" /></td>
	   </tr> 

    </table>
	</if>
    <div class="bott_ton" onclick="javascript:location.href=‘/Goods/Index‘">
    	<img src="/{:APP_PATH}/Public/img/pic/logobean.png"/>
    </div>
    <div id="sider">
    	<ul id="usecond">
    	<li style="line-height:36px"> <a href="{:U(‘Index/Platann‘)}" style="color:#FFF">平台公告</a></li>
    	<li style="line-height:36px"> <a href="{:U(‘Index/HelpCenter‘)}" style="color:#FFF">帮助中心</a></li>
    	<li style="line-height:36px"> <a href="{:U(‘Index/PlatIntro‘)}" style="color:#FFF">平台介绍</a></li>
    	<li style="line-height:36px"> <a href="{:U(‘Index/Contact‘)}"style="color:#FFF">联系我们</a></li>
    	</ul>
    </div>
    </div>
<include file="Public:footer" />

时间: 2025-01-08 14:00:41

点击页面任何位置隐藏div的相关文章

jquery点击页面其他位置隐藏div

$("#btnAdd").on('click', function (e) { $("#setUp").toggle(); $(document).one('click', function () { $('#setUp').hide(); }) e.stopPropagation();/*stopPropagation();方法可以阻止把事件分派到其他节点*/ }); 原文地址:https://www.cnblogs.com/otsf/p/10796874.htm

点击页面其它地方隐藏div所想到的jQuery的delegate

在网页开发的过程中经常遇到的一个需求就是点击一div内部做某些操作,而点击页面其它地方隐藏该div.比如很多导航菜单,当菜单展开的时候,就会要求点击页面其它非菜单地方,隐藏该菜单. 先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> <

html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的div,代码实现思路如下: <a class="banner" href="/schoolFair/registration#nav"> <a href="#abc">点击跳转</a>    <div id=&

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

jquery实现点击页面其他地方隐藏指定元素

jquery实现点击页面其他地方隐藏指定元素:在很多效果中,都有这样的功能,当点击页面的其他地方时,能够隐藏一个指定的元素,例如在模拟实现的select下拉菜单效果中,当下拉菜单出现的时候,我们往往希望当点击页面其他地方的时候,能够隐藏下拉条,下面就通过一个实例单独介绍一下如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

contains 之 点击元素外位置隐藏元素

contains 之 点击元素外位置隐藏元素 api: contains   检测一个元素包含在另一个元素之内  详解:http://www.runoob.com/jquery/misc-contains.html 原理: 监听click事件,当点击时判断点击位置是否包含在目标元素内,若判断通过则隐藏 代码: // 创建click监听 mounted () { document.addEventListener('click', this.queryHide) }, // 清除click监听 b

点击页面其它地方隐藏该div的方法

思路一 第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation(); else

点击页面其它地方隐藏该div的两种思路

第一种思路分两步 第一步:对document的click事件绑定事件处理程序,使其隐藏该div 第二步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div. $(document).bind('click',function(){ $('#test').css('display','none'); }); $('#test').bind('click',function(e){ stopPropagati

点击页面其它地方隐藏某个div的两种思路

思路一             第一种思路分两步     第1步:对document的click事件绑定事件处理程序,使其隐藏该div     第2步:对div的click事件绑定事件处理程序,阻止事件冒泡,防止其冒泡到document,而调用document的onclick方法隐藏了该div $(document).bind('click',function(){    $('#test').hide();}); $('#test').bind('click',function(e){