作者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