点击页面任何位置隐藏div的实现方法_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>
  <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 隐藏div、javascript点击隐藏、js点击显示隐藏div、点击其他地方隐藏div、点击空白处隐藏div，以便于您获取更多的相关知识。