A website I'm working on has sidebar with expandable/collapsible entries. Some of the items on this sidebar have a bullet next to them that, when clicked on, reveals a second level of sidebar items. We are using an onclick
event to call this function to do this. Here is the script:
<script type="text/javascript">
function menuClick(menu)
{
if(menu.nextSibling.nextSibling.nextSibling.style.display == "inline")
{
menu.nextSibling.nextSibling.nextSibling.style.display = "none";
}
else
{
menu.nextSibling.nextSibling.nextSibling.style.display = "inline";
}
}
</script>
This works in IE8, but doesn't work in IE7. In IE7, when these bullets开发者_StackOverflow社区 are clicked, the menu will expand like normal, but doesn't show the next level of links. Also in IE7 these bullets are above their respective links on a separate line. If you'd like to take a look a the site it's www.triptac.org. If you have IE8 you can see how it doesn't work in compatability view. I'd greatly appreciate any help.
display: inline
really isn't what you want to show the hidden lists, display: block
(the default for lists) is what you want. I suspect that will help with the show/hide but it is hard to say without an editable example.
You'll have to mess around with the padding and margins on the arrows to get them in the right place in IE7; set up an IE7-specific stylesheet and load it using an IE7 conditional comment, that will keep the IE7 nonsense from polluting everything else. Then start adjusting the margins and padding on the list, list items, and the arrows until IE7 behaves itself. I'd like to be able to offer better advice but getting IE7 to render things sensible is generally a simple process of fiddling with the margins and padding (and sometimes display
) until it works (and then the drinking (or your equivalent) starts).
Matt Ball is right, jQuery would make a lot of this cleaner. OTOH, you'd still have to beat IE7 into submission so jQuery won't make all the pain go away.
精彩评论