축소 후 탐색 바가 확장되지 않습니까?

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을 사용했습니다.

<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

에 대해 동일한 작업을 수행해야 할이 곳 div의 일치의 개방과 폐쇄의 중첩으로 전체 HTML : 당신은 여러 ID를 사용하는

<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>