abr*_*abr 5 html javascript html-lists
我正在实现一个 ul 和 li 列表，来自 json 数据并具有展开/折叠功能。
\n\n问题是，当尝试展开/折叠时，所有子项都一起展开，但我只想折叠/展开单击的子项；
\n\n这是我的代码：
\n\n<html>\n <head>\n <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>\n <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>\n <style type="text/css">\n ul li ul {\n display: none;\n } \n a {\n color: red;\n }\n </style>\n <title></title>\n </head>\n <body>\n <ul id="menu" class="list">\n </ul>\n <script type="text/javascript">\n $(window)\n .load(\n function() {\n var JSON = {\n menu : [ {\n name : \'Title\',\n link : \'#\',\n sub : [ {\n name : \'Enclosure1\',\n link : \'#\',\n sub : null\n }, {\n name : \'Enclosure2\',\n link : \'#\',\n sub : null\n }, {\n name : \'Enclosure3\',\n link : \'#\',\n sub : null\n } ]\n },{\n name : \'Link\',\n link : \'#\',\n sub : null\n },{\n name : \'Content\',\n link : \'#\',\n sub : null\n },{\n name : \'Enclosures\',\n link : \'#\',\n sub : [ {\n name : \'Enclosure1\',\n link : \'#\',\n sub : null\n }, {\n name : \'Enclosure2\',\n link : \'#\',\n sub : null\n }, {\n name : \'Enclosure3\',\n link : \'#\',\n sub : null\n } ]\n }, {\n name : \'Authors\',\n link : \'#\',\n sub : [ {\n name : \'Author1\',\n link : \'#\',\n sub : null\n }, {\n name : \'Author2\',\n link : \'#\',\n sub : null\n } ]\n },{\n name : \'Published At\',\n link : \'#\',\n sub : null\n }, {\n name : \'Stream\',\n link : \'#\',\n sub : [ {\n name : \'STR1\',\n link : \'#\',\n sub : null\n }, {\n name : \'STR2\',\n link : \'#\',\n sub : null\n } ]\n } ]\n }\n\n $(function() {\n\n function parseMenu(ul, menu) {\n for (var i = 0; i < menu.length; i++) {\n var li = $(ul).append(\n \'<li>\'+ menu[i].name\n + \'</li>\');\n if (menu[i].sub != null) {\n var subul = $(\'<ul class="list"></ul>\');\n $(li).append(subul);\n parseMenu($(subul), menu[i].sub);\n }\n }\n }\n\n var menu = $(\'#menu\');\n parseMenu(menu, JSON.menu);\n });\n });//]]>\xe2\x80\x8b\n </script>\n <script type="text/javascript">$(document).on(\'click\', \'.list > li \', function () {\n $(this).parent().children(\'ul\').toggle();\n })\n </script>\n </body>\n</html>\n在您的脚本中，进行更改以切换“下一个”UL 标记。
<script type="text/javascript">$(document).on('click', '.list > li ', function () {
$(this).next('ul').toggle();
})</script>
http://codepen.io/anon/pen/xgoapR
并从子菜单折叠开始，更改
ul li ul {
display: none;
}
到
ul > ul {
display: none;
}
编辑：在http://codepen.io/anon/pen/mWbLpm中查看包含折叠、动画和 +/- 切换的完整工作示例
| 归档时间： |
|
| 查看次数： |
25889 次 |
| 最近记录： |