Jquery 手风琴菜单

<!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">
<head>
    
<title></title>
    
<link rel="stylesheet" type="text/css" href="Css/Commom.css" />
    
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    
<script language="javascript" type="text/javascript">
        $(
function () {

            $(
"ul").hide();
            $(
"li:even").css("background""#ebf1de").css("padding""5px");
            $(
"li:odd").css("background""#FFFFFF").css("padding""5px");
            $(
"p").click(function () {
                $(
this).next(".column >ul").slideDown("fast").siblings(".column >ul").slideUp("fast");
                $(
this).css("color","red").siblings(".column >p").css("color","black");
            });
        });
    
</script>
</head>
<body>
    
<div class=" column">
        
<class="bgred">
            我的好友
</p>
        
<ul class="ulshow">
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
            
<li>张三</li>
        
</ul>
        
<class="bgred">
            陌生人
</p>
        
<ul class="ulshow">
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
            
<li>李四</li>
        
</ul>
        
<class="bgred">
            黑名单
</p>
        
<ul class="ulshow">
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
            
<li>王二麻子</li>
        
</ul>
    
</div>
</body>
</html>
posted @ 2011-06-16 22:53  ゞ追忆o0ゞ  阅读(1170)  评论(0编辑  收藏  举报