javascript - Nav-bar not expanding after being collapsed? -
in simple expand/collapse navbar made, second navbar not re-expand once collapsed, though first 1 works fine. once collapse second section, stays collapsed , not expand, though first section continues work fine, expanding , collapsing thanks, appreciated.
here code below:
<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>
the problem using id link-1 more once; , please check if open , closing divs matching.
i changed function this:
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)"; } } and matching html. instead of link-1 used menulink-1 since link-1 in use element.
<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> you have same menulink-2
this full html nesting of open , closing of divs matches:
<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>
Comments
Post a Comment