here is the code, as it is so simple, there is no more comment. any questions, please feel free to leave a message to me:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function () {
$(".parent").next().hide();
$(".parent").toggle(function () {
$(this).next().show("50");
$(this).removeClass("parent").addClass("minus");
}, function () {
$(this).next().hide("50");
$(this).removeClass("minus").addClass("parent");
}
);
});
</script>
<style>
body{
font-size:12px;
}
div{
padding-left:10px;
}
.parent{
background-image:url("plus.gif");
padding-left:15px;
background-position:center left;
background-repeat:no-repeat;
cursor:pointer;
}
.parent:hover{
padding-left:18px;
}
.minus{
background-image:url("minus.gif");
padding-left:15px;
background-repeat:no-repeat;
background-position:center left;
}
</style>
</head>
<body>
<div id="menu">
<div class="parent">国内网站</div>
<div>
<div>新浪</div>
<div>搜狐</div>
<div>网易</div>
<div class="parent">国内知名站点</div>
<div>
<div>博客园</div>
<div>韩现龙的博客</div>
</div>
</div>
<div class="parent">国外站点</div>
<div>
<div>白宫</div>
<div class="parent">国外政府网站</div>
<div>
<div>美国网站</div>
<div>北美网站</div>
</div>
<div>伊拉克</div>
<div>英国BBC</div>
</div>
</div>
</body>
</html>
<head>
<title></title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function () {
$(".parent").next().hide();
$(".parent").toggle(function () {
$(this).next().show("50");
$(this).removeClass("parent").addClass("minus");
}, function () {
$(this).next().hide("50");
$(this).removeClass("minus").addClass("parent");
}
);
});
</script>
<style>
body{
font-size:12px;
}
div{
padding-left:10px;
}
.parent{
background-image:url("plus.gif");
padding-left:15px;
background-position:center left;
background-repeat:no-repeat;
cursor:pointer;
}
.parent:hover{
padding-left:18px;
}
.minus{
background-image:url("minus.gif");
padding-left:15px;
background-repeat:no-repeat;
background-position:center left;
}
</style>
</head>
<body>
<div id="menu">
<div class="parent">国内网站</div>
<div>
<div>新浪</div>
<div>搜狐</div>
<div>网易</div>
<div class="parent">国内知名站点</div>
<div>
<div>博客园</div>
<div>韩现龙的博客</div>
</div>
</div>
<div class="parent">国外站点</div>
<div>
<div>白宫</div>
<div class="parent">国外政府网站</div>
<div>
<div>美国网站</div>
<div>北美网站</div>
</div>
<div>伊拉克</div>
<div>英国BBC</div>
</div>
</div>
</body>
</html>