[jQuery] add/removeClass vs css
I'm a newbie in learning mode, and I am experimenting as part of that
effort. I am writing a little menu code to that end. Anyway, as I
"roll" over a submenu I want to visually change that item. I have done
it using the css function and it works fine. However, when I try to do
the same thing using add/removeClass, it seems to do nothing. What am
I doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>menu4.html</title>
<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
$("#nav2 > div > div").hide();
$("#nav2 > div > h2").click(function(event){
if (this == event.target) {
var submenu = $(this).parent().find('div');
if (submenu.is(':hidden')){
$(this).css('background-image', 'url(expanded.gif)');
submenu.slideDown('slow');
} else {
$(this).css('background-image', 'url(collapsed.gif)');
submenu.slideUp('slow');
}
}
});
$('#nav2 > div > div > div').mouseover(function(event){
$(this).addClass('highlight');
});
$('#nav2 > div > div > div').mouseout(function(event){
$(this).removeClass('highlight');
});
});
</script>
<style type="text/css">
#nav2
{
font-family: arial;
font-size: 14px;
font-weight: bold;
width: 160px;
}
#nav2 div
{
cursor: pointer;
}
#nav2 > div > h2
{
margin: 0;
font-size: 13px;
border-bottom: 1px solid #ddd;
color: #fff;
padding: 2px 3px 3px 14px;
background: #036 url(collapsed.gif) no-repeat 3px 6px;
}
#nav2 > div > div > div
{
padding: 2px 3px 3px 8px;
font-size: 12px;
background-color: #ddd;
border-bottom: 1px solid #036;
border-right: 1px solid #036;
}
#nav2 > div > div > div > a
{
color: #036;
text-decoration: none;
}
.highlight
{
background-color: white;
}
</style>
</head>
<body style="margin: 0;">
<div id="nav2">
<div>
<h2>Main 1</h2>
<div>
<div><a href="#">1.A</a></div>
<div><a href="#">1.B</a></div>
<div><a href="#">.1C</a></div>
<div><a href="#">1.D</a></div>
<div><a href="#">1.E</a></div>
<div><a href="#">1.F</a></div>
<div><a href="#">1.G</a></div>
<div><a href="#">1.H</a></div>
</div>
</div>
<div>
<h2>Main 2</h2>
<div>
<div><a href="#">1.A</a></div>
<div><a href="#">1.B</a></div>
<div><a href="#">1.C</a></div>
<div><a href="#">1.D</a></div>
<div><a href="#">1.E</a></div>
</div>
</div>
<div>
<h2>Main 3</h2>
<div>
<div><a href="#">1.A</a></div>
<div><a href="#">1.B</a></div>
<div><a href="#">1.C</a></div>
<div><a href="#">1.D</a></div>
<div><a href="#">1.E</a></div>
</div>
</div>
</div>
</body>
</html>