动态手风琴菜单答案

【问题标题】：Dynamic Accordion Menu动态手风琴菜单
【发布时间】：2015-05-01 14:57:57
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery database html accordion

【解决方案1】：

添加

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

到 GetMenu 函数的末尾

在您的 jsFidle 示例中是 h4

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

是故意的吗？
我认为应该是h3？

【讨论】：

哦，是的，那是我可能只是在尝试随机的东西，我会切换回 h3
另外，添加了刷新，现在看起来像this，它工作正常。谢谢！

【解决方案2】：

您可以使用 jquery 手风琴面板：https://jqueryui.com/accordion/ 并使用 innerHTML 属性而不是 append 属性，我在 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"
    });
    });

【讨论】：