導航欄在折疊后沒有展開？

Question

在我制作的這個簡單的展開/折疊導航欄中，第二個導航欄一旦折疊就不會重新展開，盡管第一個導航欄工作正常。 一旦我折疊了第二部分，盡管第一部分仍然可以正常工作，擴展和折疊，但它仍然保持折疊狀態並且不會擴展，謝謝。感謝所有幫助。

這是我的代碼如下：

<script>
    var CurrentSec;
    var CurrentMenu;
    var CurrentLink;
    function Change(sec, state) {
        CurrentSec = "Sec-"+sec;
        CurrentMenu = "Menu-"+sec;
        CurrentLink = "Link-"+sec;
        if (state == 0) {
            document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
            document.getElementById(CurrentMenu).style.display = "none";
            document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
        }
        else {
            document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
            document.getElementById(CurrentMenu).style.display = "inline";
            document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
        }

    }
</script>
<div class="sdmenu" style="visibility:visible">
    <span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><a href="javascript:Change(1, 0)" id="Link-1"><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></a></span>
        <div id="Navbar"><div class="submenu" id="Menu-1">
        <a id="Link-1" >Test1</a>
        <a id="Link-2" >Test2</a>
        <a id="Link-3" >Test3</a>
        <a id="Link-4" >Test4</a>
        <a href="javascript:void(null)"></a>
        <span class="menubottom" id="menubottom">    
            <img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
        </span>
     </div>
        <span class="title" id="community">
            <img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
                <a href="javascript:Change(2, 0)" id="Link-2"><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/></a>
            </span>
        <div id="Navbar-2">
            <div class="submenu" id="Menu-2">
                <a id="Link-5" >Test5</a>
                <a id="Link-6" >Test6</a>
                <a id="Link-7" >Test7</a>
                <a id="Link-8" >Test8</a>
                <a href="javascript:void(null)"></a>
                <span class="menubottom" id="menubottom">
                    <img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
                </span>
            </div>
        </div>

Answer 1

問題是您多次使用link-1的ID。 並請檢查您的打開和關閉div是否匹配。

我將您的功能更改為：

function Change(sec, state) {
    console.log('Change(sec, state)', sec, state);
    var section = document.getElementById("Sec-"+sec);
    var menu = document.getElementById("Menu-"+sec);
    var menulink  = document.getElementById("MenuLink-"+sec); // <-- new MenuLink
    if (state == 0) {
        section.src = "collapsed.gif";
        menu.style.display = "none";
        menulink.href = "javascript:Change("+sec+", 1)";
    }
    else {
        section.src = "expanded.gif";
        menu.style.display = "inline";
        menulink.href = "javascript:Change("+sec+", 0)";
    }
}

和匹配的html。 我使用了MenuLink-1而不是Link-1因為Link-1已經用於另一個元素。

<span class="title" id="community">
  <img  src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
  <a  href="javascript:Change(1, 0)" id="MenuLink-1">
      <img  src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
   </a>
</span>

您必須對MenuLink-2做同樣的MenuLink-2

這是完整的html，其中div的打開和關閉的嵌套匹配：

<div class="sdmenu" style="visibility:visible">
    <span class="title" id="community1">
    <img  src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
    <a  href="javascript:Change(1, 0)" id="MenuLink-1">
       <img  src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
    </a>
    </span>
    <div id="Navbar">
      <div class="submenu" id="Menu-1">
        <a id="Link-1">m1.1</a>
        <a id="Link-2">m1.2</a>
        <a id="Link-3">m1.3</a>
      </div>
    </div>
    <span class="title" id="community2">
     <img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
     <a href="javascript:Change(2, 0)" id="MenuLink-2">
       <img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
     </a>
    </span>
    <div id="Navbar-2">
        <div class="submenu" id="Menu-2">
            <a id="Link-5">m2.5</a>
            <a id="Link-6">m2.6</a>
            <a id="Link-7">m2.7</a>
        </div>
    </div>
</div>