[問題] js開闔選單的問題

[oj113068 (橘子汁)]

各位板友好 @ @

我自己做練習寫了一個開闔次選單

邏輯是這樣的

有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
推 s25g5d4:你一開始知道加window.onload 後來卻沒加?!
意思是要這樣嗎?

window.onload=function(){

        var idNOW=document.getElementById("MenuA");

}

可是window.onload兩次不會覆蓋掉嗎!?


→ j094097:我這邊測沒問題...
欸?
可以問J大怎麼測的嗎!?

順便補充一下
menuEffect.js裡面已經沒有
var idNOW=document.getElementById("MenuA");
囉@ @
我記得不能宣告兩次

→ j094097:原來我把E那行註解掉了...照你原本得來會error
不好意思 本來有E
我只是想讓版友好閱讀所以簡化了HTML
剛剛已經修文
不過我這邊還是不行Orz
※ 編輯: oj113068        來自: 59.126.30.45         (12/28 21:48)
→ ducksteven:如果你放在head，因為瀏覽器還沒讀到div id=MenuA
→ ducksteven:所以去抓 getElementById 出來的就是 null
→ ducksteven:正確的做法是(1)掛在DOMContentLoaded之後或(2)body前
→ ducksteven:Example:http://jsbin.com/iqexog/1/edit
→ ducksteven:喔，要按一下右上角 run with JS
原來如此 謝謝d大 >________<
※ 編輯: oj113068        來自: 59.126.30.45         (12/28 22:29)
→ oj113068:結果現在的新問題是IE不動Orz
→ oj113068:substr();IE不能用負數Orz 好煩啊唉啊啊啊