Question

我当前的程序接收存储在S3存储桶目录中的所有对象。然后，我接收每个对象的密钥和URL，然后在按下按钮后用于创建列表。输出的一个例子：

image
    someImage.png
    someOtherImage.jpg
other
    someWordDoc.doc
    someThing.txt
video
    someVideo
        HLS_1M.m3u8
        HLS_2M.m3u8
        HLS_400K.m3u8
        someVideo.mp4

我要做的是使用此输出并使用jQuery的Navgoco插件创建可折叠列表。只有在加载后已创建列表的HTML时，代码的可折叠部分才有效。可折叠部分的代码：

$(document).ready(function() {
    // Initialize navgoco with default options
    $("#demo1").navgoco({
    caretHtml: '',
    accordion: false,
    openClass: 'open',
    save: true,
    cookie: {
        name: 'navgoco',
        expires: false,
        path: '/'
    },
    slide: {
        duration: 400,
        easing: 'swing'
    },
    // Add Active class to clicked menu item
    onClickAfter: function(e, submenu) {
        e.preventDefault();
        $('#demo1').find('li').removeClass('active');
        var li =  $(this).parent();
        var lis = li.parents('li');
        li.addClass('active');
        lis.addClass('active');
    },
});

    $("#collapseAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', false);
    });

    $("#expandAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', true);
    });
});

只有在新生成的列表完成时才会调用代码的可折叠部分，但我的Javascript / jQuery技能不那么出色。有没有办法让我在完成HTML生成后调用可折叠函数？

Answer 1

只要它在$(document).ready(function () {中，它就是你的好去处。

Answer 2

我知道这是一个迟到的回应，但我也在寻找答案，最后找到了解决方案。

所以希望这对找到这个的人有用。

在确定要添加到菜单中的数据已加载到HTML后，必须调用以下代码。并且务必从之前的位置移除。

// Initialize navgoco with default options
    $("#demo1").navgoco({
    caretHtml: '',
    accordion: false,
    openClass: 'open',
    save: true,
    cookie: {
        name: 'navgoco',
        expires: false,
        path: '/'
    },
    slide: {
        duration: 400,
        easing: 'swing'
    },
    // Add Active class to clicked menu item
    onClickAfter: function(e, submenu) {
        e.preventDefault();
        $('#demo1').find('li').removeClass('active');
        var li =  $(this).parent();
        var lis = li.parents('li');
        li.addClass('active');
        lis.addClass('active');
    },
});

    $("#collapseAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', false);
    });

    $("#expandAll").click(function(e) {
        e.preventDefault();
        $("#demo1").navgoco('toggle', true);
    });

使用Navgoco动态生成可折叠菜单

2 个答案: