Question

我目前正在建立一个基于单页网站的网站。我目前有一个像

这样的主视图

<div id="right-content">
<div id="accordion"></div>
</div>

在另一个视图中，我有一些ajax用返回的数据填充#accordion，返回的内容放在唯一唯一id div中。如何将这些数据用作手风琴？我在右内容视图和主视图中都尝试过该脚本，并且没有手风琴功能。实质上，我在获取某些数据时所拥有的是这个

<div id="right-content">
    <div id="accordion">
        <div class="blog">
            <h2>Blog Header</<h2><!--This should be the click area for the accordion-->
            <p>Content content content content content content content content
            content content content content content content content content content
            content content content contentcontentcontent content content content</p>
           <!--<p> should be hidden unless this accordion is active</p>
    </div>

我认为我的问题可能是每个'手风琴'首先放在它自己的div中，这不是accordion例子中的方式。

请有人帮我解决这个问题吗？非常感谢

Answer 1

HTML示例中有多个标记错误。缺少<div>的几个结束标记。

h2的结束标记错误</<h2>而不是</h2>

所以我猜你的意思是你的标记看起来像这样

<div id="right-content">
    <div id="accordion">
        <div class="blog">
            <!-- Note the additional <a> tag to get the accordion arrows -->
            <h2><a>Blog Header</a></h2>
            <p>Content content content content content content content content
            content content content content content content content content
            content content content content content content content content
            </p>
        </div>
        <div class="blog2">
            <h2><a>Blog Header 2</a></h2>
            <p>Content content content content content content content content
            content content content content content content content content
            content content content content content content content content
            </p>
        </div>
    </div>
</div>

现在您需要做的就是指定正确的header选项。

$(document).ready(function() {
    // run your ajax stuff
    // when you are done inserting all the stuff
    // run this (after ajax operations are completed)
    $('#accordion').accordion({header:'h2'});
});

查看此http://jsbin.com/ubiwa以获取有效工作示例

用更多内容取代手风琴占位符

1 个答案: