[問題] js開闔選單的問題
各位板友好 @ @
我自己做練習寫了一個開闔次選單
邏輯是這樣的
有A、B、C三個主題，下面各有包含幾個項目。
在相關的頁面，相關的主選單是預設展開的狀態，但點選其他選單時，就會闔起來，然
後才開啟當下點選的那個項目。也就是一次只有一個選單會是開啟的狀態。
===============================JS的部分整個是長這樣==========================
window.onload=function(){
document.getElementById("mainMenuA").onclick=OPEN;
document.getElementById("mainMenuB").onclick=OPEN;
document.getElementById("mainMenuC").onclick=OPEN;
//儲存當下開啟的次選單id，預設為第一個
var idNOW=document.getElementById("MenuA");
function OPEN(){
//取當下點選的主選單ID最後一個字
var mainName=this.id.substr(-1);
//用mainName確認相關次選單的id
var subName=document.getElementById("Menu"+mainName);
if(subName!=null){
idNOW.style.display="none";
subName.style.display="block";
idNOW=subName;
}
return false;
}
}
==================================HTML長這樣==================================
<div class="main_menu">
<a id="mainMenuA" href="#">a0</a>
<div id="MenuA" style="display:block">
<a href="a1.html">1</a>
<a href="a2.html">2</a>
<a href="a3.html">3</a>
<a href="a4.html">4</a>
<a href="a5.html">5</a>
</div>
<a id="mainMenuB" href="#">b0</a>
<div id="MenuB">
<a href="b1.html">b1</a>
<a href="b2.html">b2</a>
<a href="b3.html">b3</a>
</div>
<a id="mainMenuC" href="#">c0</a>
<div id="MenuC">
<a href="c1.html">c1</a>
<a href="c2.html">c2</a>
<a href="c3.html">c3</a>
</div>
</div>
============================然後是CSS================================
#MenuA,#MenuB,#MenuC,#MenuD,#MenuE{
display:none;}
====================
我碰到的困難是
如果我把JS放在<script>標籤裡面運行，或外部連結的檔案，都沒有問題
但是因為不同的頁面預設開啟選單的應該是不同的
所以我想把
var idNOW=document.getElementById("MenuA");
這一行獨立放在HTML的HEAD裡面，其他的則用外部連結的檔案共用
所以變成以下這樣
<script language="javascript" type="text/javascript">
var idNOW=document.getElementById("MenuA");
</script>
<script type="text/javascript" src="js/menuEffect.js"></script>
但是卻發生了錯誤
firebug回給我idNOW is null
我猜想是執行順序的問題
但是我調動過順序
先link JS檔案，再宣告idNOW
還是發生一樣的錯誤
到底是什麼原因呢...想不透
懇請比較熟練的版友告知Orz
謝謝大家~
(我知道開闔選單有很多解法 不過我只是想搞懂這個寫法有什麼問題...)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.126.30.45
推
12/28 21:31, , 1F
12/28 21:31, 1F
意思是要這樣嗎?
window.onload=function(){
var idNOW=document.getElementById("MenuA");
}
可是window.onload兩次不會覆蓋掉嗎!?
→
12/28 21:32, , 2F
12/28 21:32, 2F
欸?
可以問J大怎麼測的嗎!?
順便補充一下
menuEffect.js裡面已經沒有
var idNOW=document.getElementById("MenuA");
囉@ @
我記得不能宣告兩次
→
12/28 21:46, , 3F
12/28 21:46, 3F
不好意思 本來有E
我只是想讓版友好閱讀所以簡化了HTML
剛剛已經修文
不過我這邊還是不行Orz
※ 編輯: oj113068 來自: 59.126.30.45 (12/28 21:48)
→
12/28 22:22, , 4F
12/28 22:22, 4F
→
12/28 22:22, , 5F
12/28 22:22, 5F
→
12/28 22:23, , 6F
12/28 22:23, 6F
→
12/28 22:24, , 7F
12/28 22:24, 7F
→
12/28 22:25, , 8F
12/28 22:25, 8F
原來如此 謝謝d大 >________<
※ 編輯: oj113068 來自: 59.126.30.45 (12/28 22:29)
→
01/02 18:46, , 9F
01/02 18:46, 9F
→
01/02 19:12, , 10F
01/02 19:12, 10F