sevens
12-23-2003, 11:26 AM
Hey Folks!!
Here is some code:
<html>
<head>
<script language="JavaScript1.2">
<!--
function dropDown(id)
{
liItem = document.getElementById(id);
target = liItem.childNodes[1];
if (target.style.display == "none")
{
target.style.display = "block";
target.style.listStyleImage = "url(modules/Boat_Guide/images/arrow_down.gif)";
}
else
{
target.style.display = "none";
target.style.listStyleImage = "url(modules/Boat_Guide/images/arrow.gif)";
}
}
-->
</script>
</head>
<body>
<ul>
<li id="li1" onclick="dropDown(id);">category 1
<ul style="display: none; ">
<li id="li2" onclick="dropDown(id);">brand 1
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
<li id="li4" onclick="dropDown(id);">brand 2
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
</ul>
</li>
<li id="li3" onclick="dropDown(id);">category 2
<ul style="display: none; ">
<li id="li6" onclick="dropDown(id);">brand 1
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
<li id="li8" onclick="dropDown(id);">brand 2
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Here is my problem. If you run this code in a browser, you will notice that the first level expands just fine. It's when you try to expand the second level that you run into problems. It looks like it is working but then it goes back and runs the script on the parent node as well. I am baffled. I have tried everything from different parent/child associations to unique IDs. I am trying to keep this as simple as possible so I can reuse this code elsewhere as needed. I know there is probably something I am just missing but I am stumped. Thanks in advance. Any help is much appreciated.
Here is some code:
<html>
<head>
<script language="JavaScript1.2">
<!--
function dropDown(id)
{
liItem = document.getElementById(id);
target = liItem.childNodes[1];
if (target.style.display == "none")
{
target.style.display = "block";
target.style.listStyleImage = "url(modules/Boat_Guide/images/arrow_down.gif)";
}
else
{
target.style.display = "none";
target.style.listStyleImage = "url(modules/Boat_Guide/images/arrow.gif)";
}
}
-->
</script>
</head>
<body>
<ul>
<li id="li1" onclick="dropDown(id);">category 1
<ul style="display: none; ">
<li id="li2" onclick="dropDown(id);">brand 1
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
<li id="li4" onclick="dropDown(id);">brand 2
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
</ul>
</li>
<li id="li3" onclick="dropDown(id);">category 2
<ul style="display: none; ">
<li id="li6" onclick="dropDown(id);">brand 1
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
<li id="li8" onclick="dropDown(id);">brand 2
<ul style="display: none; ">
<li>model 1</li>
<li>model 2</li>
<li>model 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Here is my problem. If you run this code in a browser, you will notice that the first level expands just fine. It's when you try to expand the second level that you run into problems. It looks like it is working but then it goes back and runs the script on the parent node as well. I am baffled. I have tried everything from different parent/child associations to unique IDs. I am trying to keep this as simple as possible so I can reuse this code elsewhere as needed. I know there is probably something I am just missing but I am stumped. Thanks in advance. Any help is much appreciated.