可扩展的可折叠 HTML 列表 - ul - li答案

【问题标题】：Expanding-Collapsable HTML List- ul - li可扩展的可折叠 HTML 列表 - ul - li
【发布时间】：2017-07-07 04:02:36
【问题描述】：

我正在尝试实现 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>

【问题讨论】：

你所说的动态是什么意思。有一个 DOM 树，折叠和展开将基于该 DOM 树。
Jijo Cleetus 我编辑了代码，我只想制作列表，而不是使用可折叠的 json 数据构建。
我希望它工作正常

标签： javascript html css list collapsable

【解决方案1】：

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

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

当使用.event() 时，您为当前在 DOM 中的所有元素声明事件。由于您加载 JSON 而不是附加元素，因此您的 click 事件不会看到新元素并且什么也不做（这就是它使用预定义 DOM 的原因）。

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

【讨论】：

你能举个具体的例子吗？
@AbderraoufBarrak 能否提供 JSON 加载后的 DOM 结构？
DOM结构是什么意思
@AbderraoufBarrak 从字面上看，你在 JSON 附加后得到什么 html。