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

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

我正在实现一个 ul 和 li 列表，来自 json 数据和展开/折叠功能。

问题是当尝试展开/折叠时，所有子项都一起展开，但我只希望被点击的子项折叠/展开；

这是我的代码：

<html>
   <head>
      <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <style type="text/css">
         ul li ul {
         display: none;
         } 
         a {
         color: red;
         }
      </style>
      <title></title>
   </head>
   <body>
      <ul id="menu" class="list">
      </ul>
      <script type="text/javascript">
         $(window)
                 .load(
                         function() {
                             var JSON = {
                                 menu : [ {
                                     name : 'Title',
                                     link : '#',
                                     sub : [ {
                                         name : 'Enclosure1',
                                         link : '#',
                                         sub : null
                                     }, {
                                         name : 'Enclosure2',
                                         link : '#',
                                         sub : null
                                     }, {
                                         name : 'Enclosure3',
                                         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>'+ menu[i].name
                                                         + '</li>');
                                         if (menu[i].sub != null) {
                                             var subul = $('<ul class="list"></ul>');
                                             $(li).append(subul);
                                             parseMenu($(subul), menu[i].sub);
                                                 }
                                     }
                                 }

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

【问题讨论】：

相关：stackoverflow.com/questions/31508500/…

标签： javascript html html-lists collapse expand

【解决方案1】：

checkout这个，你的代码有个小验证问题，ul里面不能有ul，但是li里面可以放。

var JSON = {
  menu: [{
    name: "Title",
    link: "#",
    sub: [{
      name: "Enclosure1",
      link: "#",
      sub: null
    }, {
      name: "Enclosure2",
      link: "#",
      sub: null
    }, {
      name: "Enclosure3",
      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>' + menu[i].name + '</li>');
      if (menu[i].sub != null) {
        var subul = $('<ul class="list"></ul>');
        $(li).append(subul);
        parseMenu($(subul), menu[i].sub);
      }
    }
  }

  var menu = $('#menu');
  parseMenu(menu, JSON.menu);
});



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

ul ul {
  display: none;
}

a {
  color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu" class="list"></ul>

【讨论】：

【解决方案2】：

在您的脚本中，更改为切换“下一个”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

【讨论】：

工作正常！但我希望列表默认关闭（默认不展开）
我添加了一个 CSS 修复以从折叠项开始
太棒了！！谢谢，子列表呢，我该如何自定义它们的字体和大小？
自定义子列表为.list > ul > li或#menu > ul >li添加CSS规则
太棒了！以及在列表和子列表之间添加向下滑动动画怎么样？

【解决方案3】：

快速解决方法是用这个 sn-p 替换最后一个脚本：

<script type="text/javascript">$(document).on('click', '.list > li ', function () {
$(this).next('.list').children().toggle();
})</script>

这会做的是展开和折叠标题元素之后的列表。

更好的解决方案是通过在“li”下创建嵌套的“ul”来重构 HTML DOM 内容。

希望这会有所帮助。

【讨论】：