Question

我正在使用json数据和expand / collapse函数实现ul和li列表。

问题在于，当尝试展开/折叠时，所有子项目都在一起扩展，但我只希望折叠/展开所单击的子项目;

这是我的代码：

<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

在您的脚本中，更改为切换“下一个”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，但你可以把它放在里面。

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

3 个答案: