点击页面任何位置隐藏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']}" 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的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • js实现的点击div区域外隐藏div区域

    首先看下JS的事件模型,JS事件模型为向上冒泡,如onclick事件在某一DOM元素被触发后,事件将跟随节点向上传播,直到有click事件绑定在某一父节点上,如果没有将直至文档的根. 阻止冒泡:1.stopPropagation()对于非IE浏览器.2.cancelBubble属性为true,对于IE浏览器, 而Jquery已经有兼容浏览器的方法,event.stopImmediatePropagation(); <!DOCTYPE html> <html> <head>

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

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

  • js点击页面其它地方将某个显示的DIV隐藏

    实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了.但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多): JS: 复制代码 代码如下: $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) {

  • 点击页面任何位置隐藏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> <scri

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

    先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div> 对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML

  • 基于JavaScript实现点击页面任何位置返回

    废话不多说了,直接上关键代码了. <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&g

  • jQuery点击页面其他部分隐藏下拉菜单功能

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了. 二.代码 HTML: <div class="select_box" id="selected"> <div class="select"> <sp

  • jQuery实现获取隐藏div高度的方法示例

    本文实例讲述了jQuery实现获取隐藏div高度的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>测试获取隐藏div高度</title> <meta name="description" content="jquery获取隐

  • vue2.0路由切换后页面滚动位置不变BUG的解决方法

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变. <a href="javascript:;" rel="external nofollow" class="btn btn01" @click="useRightNow">立即试用</a> <router-link class="db" to="/user">个人中心<

  • 点弹代码 点击页面任何位置都可以弹出页面效果代码

    复制代码 代码如下: document.writeln("<script type=\"text\/javascript\"> "); document.writeln("var isPoped = false; "); document.writeln("document.onclick = function() "); document.writeln("{ "); document.wri

  • JQuery实现点击div以外的位置隐藏该div窗口

    jquery实现鼠标点击div外的地方div窗口隐藏消失的 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he

随机推荐