动态手风琴菜单

Question

我正在尝试创建一个动态手风琴菜单，从数据库中提取其选择...不幸的是，我得到的只是一个项目列表，而不是手风琴格式。关于我需要解决的问题有什么想法吗？

你们无法访问数据库，所以我只提供一张图片，让你们知道我得到了什么。似乎是 GenMenu 中的第二个函数导致了这个问题。我刚刚做了另一个测试菜单生成功能，手风琴完美地出现了......任何帮助将不胜感激

function GenTest()
{
    for (var i=0; i < 5; i++)
    {
        $('#Items').append('<h3>Test</h3><div><p>This is a Test</p></div>');
    }
}

Answer 1

添加

$("#Items").accordion( "refresh" );

到 GetMenu 函数的结尾

在您的 jsFidle 示例中是 h4

 '<h4>' + _sItemArray.DATA.ITEMNO[i] + '</h4>'

是故意的吗？
我认为它应该在 h3 之前？

Answer 2

您可以使用 jquery 手风琴面板：https://jqueryui.com/accordion/ 并使用 innerHTML 属性而不是附加属性，我已经在 jsfiddle 中为您编写了一个示例平台。

Jsfiddle http://jsfiddle.net/RockAnne/32qmmy9y/1/

    $(function() {
    for (var i=0; i < 5; i++)
    {
     document.getElementById("accordion").innerHTML +="<h3>Test</h3><div><p>This is a Test</p></div>";
    }

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

动态手风琴菜单

Dynamic Accordion Menu

html

javascript

database

jquery

accordion