国内网站
新浪
搜狐
网易
国内知名站点
博客园
韩现龙的博客
国外站点
白宫
国外政府网站
美国网站
北美网站
伊拉克
英国BBC
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>