如何准備HTML以與JS手風琴效果一起使用？
[英]How to prime HTML for use with JS accordion effect?
問題描述
我已經建立了一個網站，其中包含結構良好的網頁。 <h1>代表網站名稱， <h2>代表頁面名稱， <h3>代表頁面的不同部分。
無論如何，我一直希望設置一堆非常長的頁面（例如FAQ頁面），並具有“手風琴”效果，其中<h3>元素是切換選項，而緊隨其后的是內容。 但是可折疊的內容必須位於其自己的<div class="draw"> （或類似名稱）中，而這不是當前設置內容的方式。 我希望這能夠在不接觸現有HTML的情況下實現，而只是通過某種方式更改JS的DOM（在jQuery的幫助下）來適應。
我認為也許在分類的<div>的<h3>元素之間包裝內容可能有效，但不知道如何完成此工作。 救命？
5 個解決方案
解決方案1
0 2009-11-12 21:11:49
手風琴小部件上的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 。 它應該很簡單。
解決方案2
0 已采納 2009-11-12 21:14:38
這是一種不依賴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>
解決方案3
0 2009-11-12 21:15:57
如果您願意考慮使用非JS替代方案，Stu Nicholls的CSS Play網站上提供了一些有趣的html / css（無js）選項：
（還有其他）
解決方案4
0 2009-11-12 21:18:03
我想它看起來像這樣：
<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的專家，但是應該可行。
解決方案5
0 2009-11-12 21:30:56
Encosia的Dave Ward 在jQuery，Firebug和選擇器上提供了長達10分鍾的精彩教程，這些教程完全可以構建您想要的東西。
如何基於給定的html結構使用Jquery產生手風琴效果？
[英]How to make an accordion effect using Jquery based on a given html structure?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.