这个展开效果的html代码，是在Plone里面扒出来的。原来处理的更好，我这只是做了一个减化。原理只是通过更改dl的样式表来实现这个效果。希望这个HTML代码示例将帮助到任何试图做同样事情的人，因为它有时候是很困难的。当然，如果它不是你想要的，那么也请留下评论，并且请继续阅读以了解如何实现我所说的效果。
JQuery这个JS框架用起来比较舒服。你可以通过$()，这个来找到你的想的结点，支持元素，id，class，还可以使用XPath。toggle这个方法有两个参数，第一个是点击数为奇数时，执行的操作，第二个参数是点击数为偶数时，执行的操作。
CSS：
dl.collapsible {
border: 1px dashed #DD8200 !important;
margin: 1em 0 0 0;
padding: 0;
font-weight: 400;
}dl.collapsible dt.collapsibleHeader {
display: block;
float: right;
background: White;
line-height: 1.2em;
position: relative;
top: -0.6em;
width: auto;
margin: 0 2em -0.6em 0;
padding: 0 0.5em;
color: #000;}
dl.collapsible dd.collapsibleContent {
margin: 0;
padding: 0 1em;
clear: left;
}dl.expandedInlineCollapsible dt.collapsibleHeader{
padding: 0 6px 0 22px;
background: White url(/skin/images/treeExpanded.gif) no-repeat 6px 50%;
cursor: pointer;
}dl.collapsedInlineCollapsible dd.collapsibleContent{
display: none;
}
dl.collapsedInlineCollapsible {
border: none !important;
height: 1em;
width: auto;
display: inline;
}
dl.collapsedInlineCollapsible dt.collapsibleHeader {
position: static;
float: none;
margin: 0;
padding: 0 0 0 22px;
line-height: 1em;
background: transparent url(/skin/images/treeCollapsed.gif) no-repeat 6px 50%;
cursor: pointer;
display: inline;
}
IE会有点小Bug:
* html dl.collapsible dt.collapsibleHeader {
margin-right: 1em;
}
官方站点上有更多的文档www.jquery.com