一个jquery的手风琴效果

最新推荐文章于 2024-10-17 09:40:47 发布

annle1018

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量88

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/lhx880619/archive/2012/02/01/2335134.html

版权

已经有很多了这里做个代码备忘

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>手风琴效果</title>
<style>
body,ul,div,li,dt,dd,dl{ margin:0; padding:0;}
ul,li{ list-style:none;}
.container{width:400px; overflow:hidden; margin:20px auto 0;}
.dl-all{ width:400px; overflow:hidden;}
.dt-title{width:400px; background:#73c5e5; height:30px; line-height:30px;margin-top:2px;}
.dt-title a{ display:block; text-decoration:none; font-size:16px;}
.list li{ width:398px; height:25px; overflow:hidden;}
.dd-title{border: 1px solid #73C5E5; width:398px;}
.hide{ display:none;}
</style>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <dl class="dl-all">
            <dt class="dt-title"><a href="#">JQuery</a></dt>
            <dd class="dd-title">
                <ul class="list">
                    <li><a href="#" target="_blank">11111</a></li>
                    <li><a href="#" target="_blank">22222</a></li>
                    <li><a href="#" target="_blank">33333</a></li>
                </ul>
            </dd>
            <dt class="dt-title"><a href="#">JavaScript</a></dt>
            <dd class="dd-title hide">
                <ul class="list">
                    <li><a href="#" target="_blank">11111</a></li>
                    <li><a href="#" target="_blank">22222</a></li>
                    <li><a href="#" target="_blank">33333</a></li>
                </ul>
            </dd>
            <dt class="dt-title"><a href="#">YUI</a></dt>
            <dd class="dd-title hide">
                <ul class="list">
                    <li><a href="#" target="_blank">11111</a></li>
                    <li><a href="#" target="_blank">22222</a></li>
                    <li><a href="#" target="_blank">33333</a></li>
                </ul>
            </dd>
            <dt class="dt-title"><a href="#">ExtJs</a></dt>
            <dd class="dd-title hide">
                <ul class="list">
                    <li><a href="#" target="_blank">11111</a></li>
                    <li><a href="#" target="_blank">22222</a></li>
                    <li><a href="#" target="_blank">33333</a></li>
                </ul>
            </dd>
        </dl>
    </div>
<script>
    $(function(){
        $(".dd-title:not(:first)").hide();
        $(".dd-title:first").show();
        $(".dt-title a").click(function(){
            $(".dd-title:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
return false;
        })
    })
</script>
</body>
</html>