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 here。

有序列表上的jQuery UI手风琴

1 个答案: