无法在正确的位置找到JQuery UI手风琴div

Question

只想展示F.A.Q.使用Jquery UI手风琴的页面。我有几个段落（FAQ标题），每个段落都包含一组问题和答案。首先，我显示常见问题解答标题列表。 当我点击其中一个时，相关的一组问题和答案出现在手风琴风格中。唯一的问题是它在整个常见问题解答标题列表下显示了手风琴div，如下图所示，但我希望它能显示每个手风琴相关常见问题标题下的div。请检查下面的代码。

这是我的观点

<div class="abc">
    <?php echo $message; foreach($results as $row){ $faq_title=$ row->faq_title; ?>
    <h3><a href="#" class="faq_title"><?php echo $faq_title; ?></a></h3>

    <?php }?>
    <div id="accordion"></div> 
</div>

这是我的JS文件：

$(document).ready(function () {

    $("#accordion").accordion({ 
        collapsible: true
    });

    $(".faq_title").click(function () {
        var title = $(this).text();

        $.post('cont/get_data', {
            title: title
        }, function (data) {

            var my_obj = data;
            $.each(my_obj, function (i) {

                var question = my_obj[i].faq_question;
                var answer = my_obj[i].faq_answer;

                var dynaContent = "<h3><a href='#' class='question'>" + question + "</a></h3>" +
                    "<div class='answer'>" + answer + "</div>";

                $("#accordion").append(dynaContent); 
                $('#accordion').accordion("refresh"); 
            });
        }, "json");

        $("#accordion").html(""); 
    });
});

Answer 1

您未在循环中包含accordion内容元素。文档要求在每个标题下存在一个元素：

<div id="accordion">
    <h3>First header</h3>
    <div>First content panel</div>

    <h3>Second header</h3>
    <div>Second content panel</div>
</div>

在您的情况下，它可能如下所示：

<div class="abc">
    <?php echo $message; foreach($results as $row){ $faq_title=$ row->faq_title; ?>
    <h3><a href="#" class="faq_title"><?php echo $faq_title; ?></a></h3>

    <div class="content-panel"></div>
    <?php }?>
</div>

您还需要修改jQuery以使用DOM遍历而不是定位ID：

$(this).next('.content-panel').html(dynaContent);

请务必使用类，而不是ID，否则会导致重复ID方案无效。