點(diǎn)擊頁面任何位置隱藏div的實(shí)現(xiàn)方法
實(shí)例如下:
<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(){ //隱藏元素(向左移動(dòng)) 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'); //點(diǎn)擊界面除了容器id為more的區(qū)域外,任何地方隱藏掉 $(document).click(function(){ $('#sider').animate({ left:-120 },1000,function(){ $('#more').addClass('moreno'); }); }); $('#more').click(function(event){ event.stopPropagation(); //隱藏元素(向左移動(dòng)) 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']}" alt="" 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">新手標(biāo)</td> <td><span class="blo">8-10%</span><span class="tblo">預(yù)期年化收益</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">預(yù)期年化收益</span></td> <td><span class="blo">1<span class="cao_one">個(gè)月</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">穩(wěn)系列</td> <td><span class="blo">12-14%</span><span class="tblo">預(yù)期年化收益</span></td> <td><span class="blo">3-6<span class="cao_one">個(gè)月</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">房產(chǎn)寶</td> <td><span class="blo">8-16%</span><span class="tblo">預(yù)期年化收益</span></td> <td><span class="blo">3-6<span class="cao_one">個(gè)月</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">平臺(tái)公告</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">平臺(tái)介紹</a></li> <li style="line-height:36px"> <a href="{:U('Index/Contact')}"style="color:#FFF">聯(lián)系我們</a></li> </ul> </div> </div> <include file="Public:footer" />
以上這篇點(diǎn)擊頁面任何位置隱藏div的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用原生js封裝webapp滑動(dòng)效果(慣性滑動(dòng)、滑動(dòng)回彈)
這篇文章主要介紹了使用原生js封裝webapp滑動(dòng)效果,具有慣性滑動(dòng)、滑動(dòng)回彈功能,需要的朋友可以參考下2014-05-05JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊編輯可修改狀態(tài)的方法,涉及javascript針對(duì)頁面元素的動(dòng)態(tài)創(chuàng)建及設(shè)置技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08認(rèn)識(shí)Knockout及如何使用Knockout綁定上下文
Knockout簡稱ko,是一個(gè)輕量級(jí)的javascript類庫,采用MVVM設(shè)計(jì)模式(即Model、view、viewModel),簡單優(yōu)雅的實(shí)現(xiàn)了雙向綁定,實(shí)時(shí)更新,幫助您使用干凈的數(shù)據(jù)模型來創(chuàng)建豐富的、響應(yīng)式的用戶界面2015-12-12微信小程序?qū)崿F(xiàn)tab點(diǎn)擊切換
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab點(diǎn)擊切換,不滑動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07javascript遍歷對(duì)象的五種方式實(shí)例代碼
在我們?nèi)粘9ぷ鬟^程中,我們對(duì)于javaScript遍歷對(duì)象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對(duì)象的五種方式,需要的朋友可以參考下2021-10-10在JavaScript中正確引用bind方法的應(yīng)用
本文的重點(diǎn)在于討論bind()方法的實(shí)現(xiàn),在開始討論bind()的實(shí)現(xiàn)之前,我們先來看看bind()方法的使用,有需要的小伙伴可以參考下。2015-05-05JavaScript移動(dòng)端常用事件之touch觸摸事件詳解
觸屏事件touch也稱為觸摸事件,touch對(duì)象代表一個(gè)觸摸點(diǎn),觸摸點(diǎn)可能是一根手指,也可能是一根觸摸筆,觸屏事件可響應(yīng)用戶手指(或觸摸筆)對(duì)屏幕或者觸控板操作,下面這篇文章主要給大家介紹了關(guān)于JavaScript移動(dòng)端常用事件之touch觸摸事件的相關(guān)資料,需要的朋友可以參考下2022-10-10