JAccordion

 效果:

 CSS:

/*accordion*/
.accord
{
    background-color: #fff;
    margin: 0px;
    border: solid 1px #99BBE8;
    border-collapse: collapse;
    vertical-align: middle;
}
.accord dd
{
    display:none;
    margin-left: 0px;
    text-align: center;
}
.accord dt
{
    font-weight: bold;
    text-align: left;
    padding: 5px;
    border-top: solid 1px #99BBE8;
    background: #E0ECFF;
    cursor: pointer;
    background-image: url("../Image/accordion_expand.png");
    background-repeat: no-repeat;
    background-position: right;
}
.accord dt.selected
{
    border-bottom: solid 1px #99BBE8;
    background-image: url("../Image/accordion_collapse.png");
}
.accord dd a
{
    padding-top: 5px;
    padding-bottom: 5px;
    color: #014F8A;
    vertical-align: middle;
    display: block;
    text-decoration: none;
    text-align: center;
    width: 100%;
}

.accord dd a:hover
{
    color: #014F8A;
    font-weight: bold;
}

.accord dd a:visited
{
    color: #014F8A;
}

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>
    <title>手风琴</title>
    <link href="Style/site.css" rel="stylesheet" type="text/css" />
    <script src="Script/jquery.min.js" type="text/javascript"></script>
    <script src="Script/JAccordion.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#accord").jAccordion();
        });
    </script>
</head>
<body>
<div style="width:200px;border:solid 1px #99BBE8;padding:2px;height:400px;">
<dl id="accord">
<dt>国家</dt>
<dd><a href="#">中国</a><a href="#">美国</a></dd>
<dt>地区</dt>
<dd><a href="#">香港</a><a href="#">台湾</a></dd>
</dl>
</div>
</body>
</html>

下载:JAccordion.min.js

posted @ 2012-07-08 11:57  Joe·Zhou  阅读(374)  评论(0)  编辑  收藏  举报