jQuery UI手風琴在有序列表上

Question

我正在嘗試將一些jQuery UI組件合並到我公司的html輸出中，以用於用戶文檔。 我對javascript經驗很少。 我讓手風琴可以處理表行，但是現在我想在一個步驟下展開和折疊子步驟，以便在有序列表中創建有序列表，但似乎無法使其正常工作。 抱歉，如果答案很簡單，請幫助我！！

<!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>

Answer 1

您需要具有正確的頁面標記才能使手風琴工作： 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 在這里。

jQuery UI手風琴在有序列表上

問題描述

1 個解決方案

解決方案1
0 已采納 2014-02-25 00:42:21

jQuery UI手風琴在有序列表上

問題描述

1 個解決方案

解決方案1 0 已采納 2014-02-25 00:42:21

解決方案1
0 已采納 2014-02-25 00:42:21