手风琴效果

非常简单的手风琴效果

<!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" xml:lang="en-us">
<head>
<title>jQuery手风琴效果</title><base target="_blank" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">

    $(function(){
        $("dd").hide();
        $("dt a").click(function(){
            
            $("dd:visible").slideUp("slow");//向上滑动
            $(this).parent().next().slideDown("slow");//向下滑动
            
            return false;
            })
        
        
        })
</script>
<style>
body { font-size:16px;}
dl { width: 300px;}
dl,dd { margin: 0; }
dt { background:#999; font-size:18px; padding:5px; margin:10px;}
ul { list-style:none; padding:5px; }
</style>
</head>
 
<body>

<dl>
    <dt><a href="#">你点啊,快点</a></dt>
    <dd>
    <ul>
        <li>
            <div style="width:280px;height:30px; border:#F00 solid 1px; margin-left:3px;"></div>
        </li>
    </ul>
    </dd>
    
    <dt><a href="#">你点啊,快点</a></dt>
    <dd>
    <ul>
        <li>
            <div style="width:280px;height:30px; border:#F00 solid 1px; margin-left:3px;"></div>
        </li>
    </ul>
    </dd>
    
    
    <dt><a href="#">你点啊,快点</a></dt>
    <dd>
    <ul>
        <li>
            <div style="width:280px;height:30px; border:#F00 solid 1px; margin-left:3px;"></div>
        </li>
    </ul>
    </dd>
</dl>
</body>
</html>

你可能感兴趣的:(手风琴效果)