一个不错的JS折叠效果
用法:
1.添加JS库(点击下截):
.xml { font-size: 12px; font-family: Tahoma, Verdana, Arial, sans-serif; color: rgba(0, 0, 0, 1); border: 1px solid rgba(221, 221, 221, 1); background-color: rgba(255, 255, 255, 1); width: 92%; line-height: 140%; padding-right: 10px; padding-left: 25px; background-image: url(“images/line_bg.gif”); background-repeat: repeat-y }
.xml a:link { color: rgba(0, 0, 0, 1); text-decoration: none; font-weight: bold }
.xml a:visited { color: rgba(0, 0, 0, 1); text-decoration: none; font-weight: bold }
.xml a:hover { text-decoration: underline }
.xml .imp { font-weight: bold; color: rgba(255, 0, 0, 1) }
.xml .coMULTI { color: rgba(128, 128, 128, 1); font-style: italic }
.xml .es0 { color: rgba(0, 0, 153, 1); font-weight: bold }
.xml .br0 { color: rgba(102, 204, 102, 1) }
.xml .st0 { color: rgba(153, 0, 0, 1) }
.xml .nu0 { color: rgba(255, 0, 0, 1) }
.xml .sc0 { color: rgba(0, 187, 221, 1) }
.xml .sc1 { color: rgba(221, 187, 0, 1) }
.xml .sc2 { color: rgba(51, 153, 51, 1) }
.xml .sc3 { color: rgba(0, 153, 0, 1) }
.xml .re0 { color: rgba(0, 0, 102, 1) }
.xml .re1 { font-weight: bold; color: rgba(0, 0, 0, 1) }
.xml .re2 { font-weight: bold; color: rgba(0, 0, 0, 1) }
<script src=“moo.fx.js” type=“text/javascript”></script>
<script src=“moo.fx.pack.js” type=“text/javascript”></script>
2.建立xhtml结构:
.xml { font-size: 12px; font-family: Tahoma, Verdana, Arial, sans-serif; color: rgba(0, 0, 0, 1); border: 1px solid rgba(221, 221, 221, 1); background-color: rgba(255, 255, 255, 1); width: 92%; line-height: 140%; padding-right: 10px; padding-left: 25px; background-image: url(“images/line_bg.gif”); background-repeat: repeat-y }
.xml a:link { color: rgba(0, 0, 0, 1); text-decoration: none; font-weight: bold }
.xml a:visited { color: rgba(0, 0, 0, 1); text-decoration: none; font-weight: bold }
.xml a:hover { text-decoration: underline }
.xml .imp { font-weight: bold; color: rgba(255, 0, 0, 1) }
.xml .coMULTI { color: rgba(128, 128, 128, 1); font-style: italic }
.xml .es0 { color: rgba(0, 0, 153, 1); font-weight: bold }
.xml .br0 { color: rgba(102, 204, 102, 1) }
.xml .st0 { color: rgba(153, 0, 0, 1) }
.xml .nu0 { color: rgba(255, 0, 0, 1) }
.xml .sc0 { color: rgba(0, 187, 221, 1) }
.xml .sc1 { color: rgba(221, 187, 0, 1) }
.xml .sc2 { color: rgba(51, 153, 51, 1) }
.xml .sc3 { color: rgba(0, 153, 0, 1) }
.xml .re0 { color: rgba(0, 0, 102, 1) }
.xml .re1 { font-weight: bold; color: rgba(0, 0, 0, 1) }
.xml .re2 { font-weight: bold; color: rgba(0, 0, 0, 1) }
<div id=“container”>
<H1 class=“title”><A href=“javascript:void(0)”>(1)这里放标题</H1>
<div class=“content”>
<p>(1)这里放内容</p>
</div>
<H1 class=“title”><A href=“javascript:void(0)”>(2)这里放标题</H1>
<div class=“content”>
<p>(2)这里放内容</p>
</div><H1 class=“title”><A href=“javascript:void(0)”>(3)这里放标题</H1>
<div class=“content”>
<p>(3)这里放内容</p>
</div>
</div>
3.调用JS:
.javascript { font-size: 12px; font-family: Tahoma, Verdana, Arial, sans-serif; color: rgba(0, 0, 0, 1); border: 1px solid rgba(221, 221, 221, 1); background-color: rgba(255, 255, 255, 1); width: 92%; line-height: 140%; padding-right: 10px; padding-left: 25px; background-image: url(“images/line_bg.gif”); background-repeat: repeat-y }
.javascript a:link { color: rgba(0, 0, 0, 1); text-decoration: none; font-weight: bold }
.javascript a:visited { color: rgba(0, 0, 0, 1); text-decoration: none; font-weight: bold }
.javascript a:hover { text-decoration: underline }
.javascript .imp { font-weight: bold; color: rgba(255, 0, 0, 1) }
.javascript .kw1 { color: rgba(0, 102, 0, 1); font-weight: bold }
.javascript .kw2 { color: rgba(0, 51, 102, 1); font-weight: bold }
.javascript .kw3 { color: rgba(0, 0, 102, 1) }
.javascript .co1 { color: rgba(153, 153, 153, 1) }
.javascript .coMULTI { color: rgba(153, 153, 153, 1) }
.javascript .es0 { color: rgba(0, 0, 153, 1); font-weight: bold }
.javascript .br0 { color: rgba(102, 204, 102, 1) }
.javascript .st0 { color: rgba(153, 0, 0, 1) }
.javascript .nu0 { color: rgba(255, 0, 0, 1) }
.javascript .me1 { color: rgba(0, 102, 0, 1) }
.javascript .re0 { color: rgba(0, 102, 255, 1) }
<script type=“text/javascript”>
//定义contents 组数为所有将要显示的内容
var contents = document.getElementsByClassName(\’content\’);
//定义contents 组数为所有标题，也是可点击展开的按钮
var toggles = document.getElementsByClassName(\’title\’);
//调用moofx JS库
var myAccordion = new fx.Accordion(
toggles, contents, {opacity: true, duration: 400} //opacity确定是否有alpha透明变化,duration确定动作所有时间
);
myAccordion.showThisHideOpen(contents[0]); //默认打开第一个内容
</script>
完成.
简单而且效果不错吧
如果还要界面好看点，自已定义下CSS吧