我已经建立了一个结构良好的页面的网站，例如。网页名称为<h1>，页面名称为<h2>，页面上的不同部分为<h3>。如何使用JS手风琴效果来使用HTML？
无论如何，我正在寻找设置一堆真正长的页面（例如常见问题解答页面）以及“手风琴”效果，其中<h3>元素是切换内容并直接切换内容。但是可折叠的内容需要在自己的<div class="draw">（或类似的）中，这不是目前设置内容的方式。我希望这是可能的，而不必触摸现有的HTML，并以某种方式改变与JS的DOM（与jQuery的援助？），以适应。
我想也许包装<h3>元素之间的内容<div>可能工作，但不知道如何完成这件事。帮帮我？
下面介绍一种不依赖于h3标签之间的可遍历DOM元素的方法。我不知道它是如何有效地换出body标签的所有内容像这样在每次加载，但...
$(document).ready(function(){
var content = $('body').html();
content = content.replace(/(<\/h3>)((.|\n|\r)*?)(<h\d>|$)/gi, "$1<div class=\"draw\">$2</div>$4");
$('body').html(content);
});
我就格式化像这样内容测试了这一点：
<body>
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
<h1>Title</h1>
<h2>Sub-Title</h2>
<h3>Section Title</h3>
this is some content
...
</body>
手风琴小部件上的jQuery文档非常易于使用。 http://docs.jquery.com/UI/Accordion。但是使用jQuery方法只适用于你在文档中描述的结构。换句话说（据我所知），不可能在不触及HTML的情况下使用jQuery accordion小部件。这是结构：
<div id="accordion">
<h3><a href="#">Tab 1</a></h3>
<div>
First tab content
</div>
<h3><a href="#">Tab 2</a></h3>
<div>
Tab two content
</div>
<h3><a href="#">Tab 3</a></h3>
<div>
Tab three content
</div>
</div>
那么你会使用JavaScript的线创建窗口小部件：
$("#accordion").accordion();
如果你想使用jQuery格式化你的HTML你，你仍然需要一种方式来选择并解析你的HTML。每个标签的内容都需要选择一些方法。如果你的HTML已经以某种方式分离了标签，那么你需要看看这个页面http://docs.jquery.com/Manipulation。它应该是非常简单的。
是的，我想要做的是在致电$("#accordion").accordion();之前悄悄创建这个结构。 –
Marcel
2009-11-12 21:15:07
如果你愿意考虑非JS的替代品，斯图尼科尔斯有一些有趣的HTML/CSS（无JS）选择在他的CSS Play网站：
（等等）
我想它看起来像这样：
<html>
<h1>site name</h1>
<h2>page name</h2>
<h3>section</h3>
<p>some stuff</p>
<p>different paragraph</p>
<ul><li>a list</li></ul>
<h3>next section</h3>
<p>different stuff</p>
...
</html>
你可以遍历HTML的所有直接子女。在开始的h3，你开始收集所有后续项目，直到下一个h3。如果下一个h3到来或页面结束，您创建一个div，并在开始h3之后添加它，所有收集的元素应从其父（html）中删除并添加为div的子元素。
看着http://docs.jquery.com/Traversing这应该很容易。我不是jquery的专家，但它应该是可行的。
Encosia的Dave Ward拥有非常棒的10分钟tutorial on jQuery, Firebug and selectors，它们完全符合您的需求。
谢谢，正是我在找的东西。如果效率不高（我至少将它限制在内容区域），它会完成工作。正则表达式来拯救！ – Marcel 2009-11-12 22:24:54