2014-02-24 34 views
0

我正在嘗試將一些jQuery UI組件添加到我公司的html輸出中以獲取用戶文檔。我用JavaScript很少有經驗。我得到了手風琴爲表格行工作,但現在我想展開和摺疊子步驟下一個有序列表內的有序列表,但似乎無法使其工作。對不起,如果答案很簡單,請幫助我!有序列表中的jQuery UI手風琴

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Accordion - Collapse content</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script> 
$(function() { 
$(".sub li:not(.accordion)").hide(); 
$(".sub li:first-child").show(); 

$(".sub li.accordion").click(function(){ 
    $(this).nextAll("li").fadeToggle(500); 
}).eq(0).trigger('click'); 
}); 
</script> 
</head> 
<body> 
    <ol class="sub"> 
      <li class="accordion">Section 1</li> 
      <ol> 
      <li>Description</li> 
      <li>This is text within section 1.</li> 
      </ol> 
      <li class="accordion">Section 2</li> 
      <ol> 
       <li>Description</li> 
       <li>This is text within section 2.</li> 
      </ol> 
    </ol> 
</body> 
</html> 
+0

它最初應該只顯示「第1部分」和「第2部分」,並且當您單擊每個顯示的子步時? –

+0

是的,我知道這個例子並不是最好的,但是當你點擊第1部分或第2部分時,它會顯示它下面的有序列表。它應該顯示1.第1部分,並且有1.描述和2.這是在它下面的第1部分中的文本。 – ernstja

回答

0

你需要有正確的頁面標記,以便手風琴工作: http://api.jqueryui.com/accordion/

不久,每個扇區的標題應該被包裹在<h>標記及其在<div>內容,你的情況:

<ol class="sub"> 
    <li class="accordion"> 
     <h3>Section 1</h3> 
     <div> 
      <ol> 
       <li>Description</li> 
       <li>This is text within section 1.</li> 
      </ol> 
     </div> 
    </li> 
    <li class="accordion"> 
     <h3>Section 2</h3> 
     <div> 
      <ol> 
       <li>Description</li> 
       <li>This is text within section 2.</li> 
      </ol> 
     </div> 
    </li> 
</ol> 

而現在只是告訴JQuery的主<ol>是手風琴:

$(".sub").accordion() 

JSFiddle here

+0

好吧,但我如何得到有序的列表頭有數字? – ernstja

+0

它們被CSS類刪除,一旦將'.accordion()'應用於元素,就會添加它們。爲了讓他們回來,你需要告訴CSS不要重寫'list-style-type'和'padding'屬性。 爲此,只需將以下CSS規則添加到'.sub'類: '.sub {list-style-type:decimal!important;填充左:40px!重要}' 但我建議你手動添加數字到標頭。 –