Question

我有一个网站设置结构良好的网页，例如。 <h1>代表网站名称，<h2>代表页面名称，<h3>代表页面上的不同部分。

无论如何，我想要设置一堆非常长的页面（例如一个FAQ页面）以及“手风琴”效果，其中<h3>个元素是切换，并且内容直接在切换之后。但是可折叠内容需要在其自己的<div class="draw">（或类似内容）中，而这不是当前内容的设置方式。我希望这可以在不触及现有HTML的情况下实现，只是以某种方式用JS（使用jQuery协助？）来改变DOM以适应。

我想也许在分类<h3>中的<div>元素之间包装内容可能有用，但不知道如何完成。帮助

Answer 1

手风琴小部件上的jQuery文档非常易于使用。 http://docs.jquery.com/UI/Accordion。但是只有拥有他们在文档中描述的结构，才能使用jQuery方法。换句话说（据我所知），如果不触及HTML，就无法使用jQuery手风琴小部件。这是结构：

<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。它应该非常简单。

Answer 2

这是一种不依赖于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>

Answer 3

如果您愿意考虑非JS替代品，Stu Nicholls在他的CSS Play网站上有一些有趣的html / css（无js）选项：

http://www.cssplay.co.uk/menu/gallery3l
http://www.cssplay.co.uk/menus/tabmenu.html

（其中包括）

Answer 4

我想它看起来像这样：

<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的专家，但它应该是可行的。

Answer 5

Encosia的Dave Ward有10分钟tutorial on jQuery, Firebug and selectors，可以构建你想要的东西。

如何使用JS手风琴效果来填充HTML？

5 个答案: