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。由于Link-1已用于其他元素，因此我使用MenuLink-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>

导航栏在折叠后没有扩展？

1 个答案: