展开-可折叠 HTML 列表- ul - li - Javascript

Question

我正在实施一个 ul 和 li 列表，来自 json 数据和 expand/collapse 函数。

问题是当尝试 expand/collapse 时，所有的子项目都一起展开，但我只希望点击的那个是 collapsed/expanded;

这是我的代码：

<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>

Answer 1

在您的脚本中，更改为切换 "next" 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

Answer 2

检查这个，你的代码有一个小的验证问题，你不能把 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>

Answer 3

快速解决方法是用这个片段替换最后一个脚本：

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

这样做的目的是展开和折叠紧跟在标题元素之后的列表。

更好的解决方案是通过在 "li".

下创建嵌套的 "ul" 来重组您的 HTML DOM 内容

希望对您有所帮助。

展开-可折叠 HTML 列表- ul - li - Javascript

Expanding-Collapsable HTML List- ul - li - Javascript

html

javascript

expand

html-lists

collapse