View Full Version : Javascript collapsing menu - stay open Help

06-23-2008, 02:45 PM
I have some code that I have been working with that currently creates a javascript menu using a list item. This menu works fine and is collapsable. The problem I am having now is that, when ever I goto one of the links from it, the menu closes back to its original setup, instead of keeping the menu I just clicked from open. Here is my code:

<script type="text/javascript">
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
if (d) {d.style.display='block';}


<dl id="menu">

<dt onclick="javascript:show('smenu1');"><a href="#" onMouseOver="document.Image6.src='images/load-butt-rollover.gif';" onMouseOut="document.Image6.src='images/load-butt.gif';"><img src="images/load-butt.gif" name="Image6" width="197" border="0" id="Image6" /></a>
<dd id="smenu1">
<li><a href="1a.html">Steel Faced Laminated<br>钢面层压橡胶块防撞垫 </a></li>
<li><a href="1b.html">Laminated Rubber Dock Bumpers<br>层压橡胶防撞垫</a></li>
<li><a href="1c.htm">Molded Dock Bumper<br>压模橡胶防撞垫</a></li>
<li><a href="1d.html">Dock Accessories<br>装卸月台辅助配件</a></li>

<dt onclick="javascript:show();"><a href="wheel.html" onMouseOver="document.Image7.src='images/wheel-butt-rollover.gif';" onMouseOut="document.Image7.src='images/wheel-butt.gif';"><img src="images/wheel-butt.gif" name="Image7" width="197" border="0" id="Image7" /></a></dt>

<dt onclick="javascript:show('smenu3');"><a href="#" onMouseOver="document.Image8.src='images/Gurd-butt-roll.gif';" onMouseOut="document.Image8.src='images/Gurd-butt.gif';"><img src="images/Gurd-butt.gif" name="Image8" width="197" border="0" id="Image8" /></a></dt>
<dd id="smenu3">
<li><a href="guard.html">Overhead Door Track Protector<br>门框钢卫士</a></li>

There is some css to go along with it, but I don't think that is needed here. What kind of code can I add to make it so it remembers what was previously opened?

any help would be greatly appreciated.

06-23-2008, 07:59 PM
If you're actually going to another page from those links, there is no 'memory'. The page is built with the same menu, so it's closed just like it was on the referring page.

If you want it to open a particular submenu on each page, you'll need to either use GET vars, for example, and pass along the menu state, or customize the menu on every page so that the menu state on that page reflects what you want.

06-25-2008, 12:31 PM
Any idea on how I can modify the code to do it manually

06-25-2008, 12:59 PM
Assuming the onclick event in the dt tag is what opens the menu, something like this might work:

<script type="text/javascript>

var thisPageMenu = 'thisPageMenuName'; // customize this for every page, e.g. 'smenu3'
window.onload = show(thisPageMenu);

/* everything else ... */