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