javascript - 导航栏折叠后不展开？

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 执行相同的操作

这是完整的 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>