jQuery实现的特效下拉菜单。只用了几行代码。
--------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉列表</title>
<script type="text/javascript" src="../jQuery js/jquery-1.3.2.js"></script>
<script>
//.siblings()获取当前元素的兄弟元素--end()重新定位到上次操作的元素
$(document).ready(function(){
$(".menu").click(function(){
$(this).addClass("highlight").children("a").show(500).end().siblings().removeClass("highlight").children("a").hide(500);
});
});
</script>
<style>
.menu{ background-color:#FF9933; border:1px #FF6600 solid; width:300px;}
a{ display:none; background-color:#CCFF66; border:1px #99FF00 solid}
</style>
</head>
<body>
<div class="menu">
1
<a>sssa啊斯蒂芬是撒发生的</a>
<a>ttt啊斯蒂芬是大是大非</a>
</div>
<div class="menu">
2
<a>sss啊斯蒂芬森大华国锋</a>
<a>tt豆腐干但是个t</a>
</div>
<div class="menu">
3
<a>sss斯蒂芬当时发生的</a>
<a>ttt斯蒂芬对手犯规</a>
</div>
</body>
</html>
|
阅读(102) | 评论(0) | 转发(0) |
