Expanding-Collapsable HTML 列表- ul - li

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 而不是附加元素，因此您的点击事件看不到新元素并且什么也不做（这就是它与 pre-defined DOM 一起工作的原因）。

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

Expanding-Collapsable HTML 列表- ul - li

Expanding-Collapsable HTML List- ul - li

html

javascript

css

list

collapsable