作者TonyQ (骨头)
看板Ajax
标题Re: [问题] [js] 显示与隐藏DIV
时间Fri Apr 4 21:26:14 2008
※ 引述《ganymade (呀)》之铭言：
: ┌───────────────────┐
: │┌──┐ │
: ││ A │ │
: │└──┘ │
: │ ┌───────────┐ │
: │ │ div │ │
: │ │ │ │
: │ │ ┌───┐ │ │
: │ │ │ B │ │ │
: │ │ └───┘ │ │
: │ └───────────┘ │
: └───────────────────┘
: 如上图，
: 我在页面上有一个按钮A和一个div，div里有一个按钮B
: div原来是隐藏的，按了A之後才会显示
: 我希望做到的效果是当div显示的时候
: 按了B 或者是 页面上除了div之外的任何地方
: div都可以被隐藏
: 这样的javascript该怎麽写呢
: 请板上高手赐教，感激不尽 Orz
让我假设你的
button id=a , b (也就是 <input type="button" id="a" value ="a"/> )
div id=d ( <div id="d" style="display:none;">
<input type="button" id="b" value ="b"/>
</div>
)
位置就自己摆啦... o_o
底下用没有lib的写法...
1.先在a的onclick上 div的show
onclick="document.getElementById("d").style.display='';"
2.由於我们希望在网页上除了div的地方按了都会隐藏
所以在body上 onclick 作隐藏的动作（body意旨整个页面）
<body onclick="document.getElementById("d").style.display='none';">
3.由於我们希望这时候点div以内的事件不要隐藏
事件触发模型是 div 被按先触发之後 接着body被按会触发
所以我们只要在div把它拦截下来就没事了
<div id="d" onclick="return false;">
<input type="button" id="b" value ="b"/>
</div>
4.因为按了b需要隐藏 所以同2 写onclick
<input type="button" id="b" value ="b"
onclick="document.getElementById("d").style.display='none';" />
5.再来有一个小bug 由於1也会触发body的onclick
会变成显示之後就隐藏，
所以要把1的内容改成
onclick="document.getElementById("d").style.display='';return false;"
--
我没有写demo，自己试试看，
我是可以很肯定八九不离十了，而且应该还有很多方式啦 o_o
--
I am a person, and I am always thinking .
Thinking in love , Thinking in life ,
Thinking in why , Thinking in worth.
I can't believe any of what ,
I am just thinking then thinking ,
but worst of all , most of mine is thinking not actioning...
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 60.250.227.184
1F：推 ganymade:ok了 谢谢你 04/05 22:10
2F：推 doenkiss:我的写法是先把全部关闭再开要的XD 04/06 10:38
3F：推 chph:二楼是对的 04/06 13:54
4F：推 hugojay:return false真好用耶XD 04/06 20:07
5F：推 toofat317:getElementById里面要用' ' 因为刚刚一直失败 XDDDDD 03/05 11:06