[jQuery] Collapsible Menu radio buttons problems in IE7
Hello all,
I just want to first say I'm pretty new to jQuery and so far love it.
Now with that said I have a problem when using Radio Buttons in a
Collapsible Menu. When you collapse the menu and re-open the section,
the Radio Button(s) that were selected disappear, that is in IE7.
Mozilla seems to work just fine, but I need this to work in IE7 as
well. Below is a very simple example that you can copy and paste to
see exactly what I'm trying to explain.
Thanks for the help,
Matt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Menu > li > a").not(":first").find("+ ul").slideUp(1);
$("#Menu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");});});
</script>
<style type="text/css">
* {
margin : 0;
padding : 0;
}
body {
font : 80% "verdana", sans-serif;
padding : 2em;
}
#Menu,
#Menu ul {
list-style : none;
width : 15em;
}
#Menu a {
background : #444c69 repeat-x center left;
border-top : 1px solid #5a648b;
color : #ffffff;
display : block;
padding : 0.7em 1em;
}
#Menu ul {
border-bottom : 1px solid #ddead2;
}
#Menu ul a {
border-color : #ddead2;
color : #55614c;
}
#Menu ul a:hover {
background : #bfddb3 repeat-x center left;
}
</style>
</head>
<body>
<ul id="Menu">
<li><a href="#">Section A</a>
<ul>
<table>
<tr>
<td>
<input type="radio" name="selection" value="on" CHECKED>
<input type="radio" name="selection" value="off">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="test" value="1" CHECKED>
<input type="checkbox" name="test1" value="0">
<td>
</tr>
</table>
</ul>
</li>
</ul>
</body>
</html>