点击页面任何位置隐藏div的实现方法


Posted in Javascript onSeptember 05, 2016

实例如下:

<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']}" 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">新手标</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" />

 点击页面任何位置隐藏div的实现方法

以上这篇点击页面任何位置隐藏div的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
微信小程序实现收货地址左滑删除
Nov 18 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
JS锚点的设置与使用方法
Sep 05 #Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 #Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 #Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 #Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 #Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 #Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 #Javascript
You might like
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
改进Django中的表单的简单方法
2015/07/17 Python
python中list列表的高级函数
2016/05/17 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python树莓派红外反射传感器
2019/01/21 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
如何基于python测量代码运行时间
2019/12/25 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
服装设计专业自荐信
2014/06/17 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
交通事故被告代理词
2015/05/23 职场文书
生活小常识广播稿
2015/08/19 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
Python使用scapy模块发包收包
2021/05/07 Python