Question

我正在尝试实现ul和li的展开折叠列表：我正在从json文件动态构建li，但无法使其可折叠。

我首先尝试静态声明，然后是动态声明，我的JS折叠代码适用于静态但不动态:(不知道为什么。

这是我的代码：

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
ul li ul {
    display: none;
    margin-left:15px;
    padding:10px;
} 

a {
    color: red;
}

</style>
<script type="text/javascript">
    $(window)
            .load(
                    function() {
                        var JSON = {
                            menu : [ {
                                name : 'Title',
                                link : '#',
                                sub : null
                            },{
                                name : 'Link',
                                link : '#',
                                sub : null
                            },{
                                name : 'Content',
                                link : '#',
                                sub : null
                            },{
                                name : 'Enclosures',
                                link : '#',
                                sub : [ {
                                    name : 'Enclosure1',
                                    link : '#',
                                    sub : null
                                }, {
                                    name : 'Enclosure2',
                                    link : '#',
                                    sub : null
                                }, {
                                    name : 'Enclosure3',
                                    link : '#',
                                    sub : null
                                } ]
                            }, {
                                name : 'Authors',
                                link : '#',
                                sub : [ {
                                    name : 'Author1',
                                    link : '#',
                                    sub : null
                                }, {
                                    name : 'Author2',
                                    link : '#',
                                    sub : null
                                } ]
                            },{
                                name : 'Published At',
                                link : '#',
                                sub : null
                            }, {
                                name : 'Stream',
                                link : '#',
                                sub : [ {
                                    name : 'STR1',
                                    link : '#',
                                    sub : null
                                }, {
                                    name : 'STR2',
                                    link : '#',
                                    sub : null
                                } ]
                            } ]
                        }

                        $(function() {

                            function parseMenu(ul, menu) {
                                for (var i = 0; i < menu.length; i++) {
                                    var li = $(ul).append(
                                            '<li class="content"><a href="'+menu[i].link+'">'

                                                    + menu[i].name
                                                    + '</a></li>');
                                    if (menu[i].sub != null) {
                                        var subul = $('<ul id="submenu'+menu[i].link+'"></ul>');
                                        $(li).append(subul);
                                        parseMenu($(subul), menu[i].sub);
                                    }
                                }
                            }

                            var menu = $('#menu');
                            parseMenu(menu, JSON.menu);
                        });
                    });//]]>
</script>
</head>
<body>
 <ul id="menu" class="list">
</ul>
<script type="text/javascript">
$('.list > li a').click(function() {
    $(this).parent().children('ul').toggle();
});
</script>
</body>

</html>

Answer 1

只需将静态.click()绑定更改为动态

即可

$(document).on('click', '.list > li a', function () {
    $(this).parent().children('ul').toggle();
})

使用.event()时，为当前在DOM中的所有元素声明事件。由于您加载了JSON而不是追加元素，因此您的点击事件不会看到新元素，也不会执行任何操作（这就是为什么它使用预定义的DOM）。

使用$('static-element-selector').on('event', 'dynamic-element-selector')时，您将事件绑定到静态元素，侦听新添加的元素。

扩展 - 可折叠HTML列表 - ul - li

1 个答案: