JAccordion

 效果:

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

你可能感兴趣的:(accordion)