| Toggle menu problem
|
zhouhana
msg:4414426 | 7:18 am on Feb 5, 2012 (gmt 0) |
Hey guys,
I'm trying to create a toggle menu. When I click "Headline 1" or "Headline 2", the options below should appear/disappear, but right now they aren't. The debugger is giving me a singleSpanElement.nextSibling.style is undefined error at row 31 (in the for loop).
What am I doing wrong, and why? And am I using this correctly?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
window.onload = initAll;
function initAll() {
function toggle() {
var nextSibling = findNextSibling(this);
if (nextSibling.style.display == "block") {
nextSibling.style.display = "none";
} else {
nextSibling.style.display = "block";
}
}
function findNextSibling(spanElementWithHeadlineClass) {
do {
var nextSiblingOfSpanElementWithHeadlinesClass = spanElementWithHeadlineClass.nextSibling;
} while (nextSiblingOfSpanElementWithHeadlinesClass && nextSiblingOfSpanElementWithHeadlinesClass.nodeType != 1);
return nextSiblingOfSpanElementWithHeadlinesClass;
}
function forEveryElementWithHeadlineClass() {
var allSpanElements = document.getElementsByTagName("span");
for ( var i = 0 ; i < allSpanElements.length ; i++ ) {
var singleSpanElement = allSpanElements[i];
if (singleSpanElement.className === "headline") {
singleSpanElement.nextSibling.style.display = "none";
singleSpanElement.onclick = toggle;
}
}
}
forEveryElementWithHeadlineClass();
}
</script>
</head>
<body>
<div id="navigation">
<ul>
<li><span class="headline">Headline 1</span>
<ul>
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
</li>
<li><span class="headline">Headline 2</span>
<ul>
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
rainborick
msg:4414495 | 5:46 pm on Feb 5, 2012 (gmt 0) |
I may not see what you're after, but it looks to me like you should use class="headline" on the enclosing <li> tag, not the <span> tag. Actually, you might need to use something like:
<li>
<div class="headline">Headline 2
<ul>
<li><a href="">Option 1</a></li>
<li><a href="">Option 2</a></li>
<li><a href="">Option 3</a></li>
</ul>
</div>
</li>
or something similar.
|
zhouhana
msg:4416496 | 4:23 am on Feb 11, 2012 (gmt 0) |
Thanks, but wouldn't that make the headline go away to? I want to apply the onclick to the headline only and make only the options (not the headline) get a display: none.
|
|
|
