On Feb 7, 11:45 am, "webdeveloper" <augustsham...@hotmail.comwrote:
sorry about that,
This is the event handling element:
<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementBy Id('extend'))"
id="extend">Text <img src="" id="arrow" src="arro-u.gif"</a>
Do not insert script into a link's href attribute, it causes problems
with IE (as you've discovered) and is a bad design choice. Use a
meaningful href attribute and move the code to an onclick handler. If
there is no suitable href value, don't use a link, use some other
element and style it to appear like a clickable element.
Also, you are using getElementById to get a reference back to the same
element. Just pass 'this' to the function (which means you probably
don't need the ID at all):
<li><a href="" id="extend" onclick="expand_menu(this)">Text <img
src="" id="arrow" src="arro-u.gif"</a>
<ul>
<li>......</li>....</ul></div>
Once that linked is clicked on, it's supposed to expand the menu
below, as well as swap the image, simultaneously.
It's what happens in FF. But in IE it takes 2 clicks, one for the
image to swap, another for the menu to expand. But only on the first
click. On any subsequent clicks, only one click is needed for both
functions to fire even in IE. But now the image displayed is the wrong
one.
These are the functions:
onload=function()
{document.getElementById("menu").getElementsByTagN ame("ul")
[1].setAttribute("style","display:none;")
} //just to ensure the inline style attribute, don't remember why it
was necessary
If you are going to use script to reveal the menu items, it is good
practice to hide them using script in the first place, otherwise users
without scripting won't be able to use the menu. Therefore browser-
friendly collapsible menus will ensure that they work without any
scripting and add all the script stuff (classes for "clickable"
elements, collapsing the tree, etc.) only if appropriate support is
detected.
You can also do most of the hiding, showing and image swaps by
toggling a CSS class rather than explicitly via script. Make the
arrow-d image and display:none part of a "hide" class, and arrow-u and
display:default part of a "show" class. Then just toggle the class of
the UL.
[...]
>
if(kids.nodeName.toLowerCase()=="ul"&&kids.style.d isplay=="none") {
kids.style.display="block";
}
else {
kids.style.display="none";
}
You can replace the entire if block if you write this toggle as:
if(kids.nodeName.toLowerCase()=="ul") {
kids.style.display = (kids.style.display == 'none')? '' : 'none';
}
Use a similar function to swap the className.
--
Rob