首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 单击显示，再单击隐藏，这个怎么实现？

单击显示，再单击隐藏，这个怎么实现？

时间：2010-03-17

来源：互联网

http://www.meituan.com/ 最上面那个切换城市的效果，点击后弹出DIV,在别的地方单击后就隐藏了，这个怎么实现？
复制代码
  1.   <script type="text/javascript"> $(document).ready(function() {  $("#guides-city-change").click( function() {     $("#guides-city-list").css("display","block");   });    
  2. $("*").click( function() {  if($("#guides-city-list").css("display")=="block")  {  $("#guides-city-list").css("display","none");  }     }); });</script>

我这么写不行，弹出来后又隐藏了，如果没有后半段代码，弹出来后不会隐藏。

作者: baiyuxiong   发布时间: 2010-03-17

你这么写，肯定要隐藏的了，你要阻止事件冒泡，因为你点了那个也点了它的父辈
而且你不能用$("*")你用$(window)应该就可以了吧

作者: ywqbestever   发布时间: 2010-03-18

我觉得你直接在你那个DIV失去焦点的时候隐藏比较好吧  初学者 拙见

作者: bkzykiller   发布时间: 2010-03-18

那如何知道DIV失去焦点呢？

作者: baiyuxiong   发布时间: 2010-03-18

blur可以捉到焦点，不过需要先在DIV上点一下，然后再在DIV外面点才可以触发。

我希望：如果城市那个层是显示的，那么再任意的点击就隐藏。

作者: baiyuxiong   发布时间: 2010-03-18

看到实现代码是这样：
changeCity:function()
{
    var _99=$D.get("guides-city-change");
    var _9a=$D.get("guides-city-list");
    if(!_99||!_9a)
        {return;}
    $E.on(_99,"click",function(e)
    {
    if($D.getStyle(_9a,"display")=="none")
        {_9a.style.display="block";}
    else{_9a.style.display="none";}}
    );
    $E.on(document,"click",function(e)
    {var _9d=$E.getTarget(e);
    var _9e=_9d.nodeName.toLowerCase();
    if(_9d!=_99&&!$D.isAncestor(_9a,_9d))
    {window.setTimeout(function(){_9a.style.display="none";},10);}});
},

不知道这个用jquery怎么写？

作者: baiyuxiong   发布时间: 2010-03-18

document上发生一次点击，怎么得到点击的是什么元素？
当点击的元素不是#guides-city-change并且列表DIV显示的，我就把它关掉。

作者: baiyuxiong   发布时间: 2010-03-18

有高手没？

作者: baiyuxiong   发布时间: 2010-03-18

楼主怎么不听我的呢，好吧，我写了个，你试试吧
复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <script type="text/javascript" src="jquery-1.3.2.min.js" ></script>
  6. <title></title>
  7. <style type="text/css">
  8.     #city{
  9.         position:absolute;
  10.         width:100px;
  11.         height:200px;
  12.         background:red;
  13.         display:none;
  14.     }
  15. </style>
  16. <script type="text/javascript">
  17.     //<![CDATA[
  18.         $(function(){
  19.             $("#test").click(function(){
  20.                 var city = $("#city"),
  21.                     $this = $(this);
  22.                 if(city.css("display")=="none"){
  23.                     city.css("left",$this.offset().left);
  24.                     city.css("top",$this.offset().top + $this.height());
  25.                     city.show();
  26.                 }else{
  27.                     city.hide();
  28.                 }    
  29.             });
  30.             $("window,*").click(function(e){
  31.                 if($("#city")[0] != e.target && e.target!=$("#test")[0]){
  32.                     $("#city").hide();
  33.                 }
  34.             });
  35.         });
  36.     //]]>
  37. </script>
  38. </head>
  39. <body>
  40. <div align="center"><a href="#" id="test">点我</a></div>
  41. <div id="city"></div>
  42. </body>
  43. </html>

作者: ywqbestever   发布时间: 2010-03-18

$(function(){
$('#ButtonID').click(function(){$('#PanelID').toggle();});});
不知道对不对？

作者: kenji0523   发布时间: 2010-03-24

toggle!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1

作者: kangyangyang   发布时间: 2010-03-25

楼上2位都么认真看楼主的题目

作者: ywqbestever   发布时间: 2010-03-25

如果在“点我 ” 按钮上点一下显示，再点一下隐藏怎么做？ 还有只有点击“点我”才能隐藏怎么做？刷新页面也不隐藏怎么做

作者: wolflove23   发布时间: 2010-04-15

原来你是JS高手

作者: baiyuxiong   发布时间: 2010-04-19

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net