如何使用 bootstrap 创建可折叠菜单

Question

我正在尝试构建一个代码片段 html 页面，我正在使用 bootstrap 框架。我的代码看起来像打击超文本标记语言<div class="col-lg-4 col-md-4 col-sm-4">    <div class="list-container">        <ul class="list-group list-group-flush" id="snippets">            <h3 class="list-group-item-heading">Code Snippets</h3>        </ul>   </div></div>JS代码<script>    $( document ).ready( function () {        for ( var index = 0; index < snippets.length; index++ ) {            $( "#snippets" ).append( '<li class="list-group-item"> <div id="snippet_name" data-toggle="collapse" data-target="#codesnippet">'        + snippets[index].Name + '</div> <div id="codesnippet" class="collapse codesnippet javascript">'        + '<pre><code class="javascript">'        + snippets[index].Code + '</code></pre></li>' );         }    } );</script>我不确定我在这里缺少什么。第二行折叠在这里没有按预期工作。例如，如果我有两个具有以下结构的片段[  {    "name" : "alert",    "code" : "alert('message')" ,  },  {    "name" : "console",    "code" : "console.log(message)",  }]我得到两行 asalert和console。当我单击alert它的折叠并显示alert('message')代码时，但是当我单击 时console，我看不到它的代码。但是当我检查console部分时，我可以看到该代码，并且还可以毫无问题地打印该对象。任何建议都非常感激。

Answer 1

由于您使用循环创建<li>元素for，因此必须使每个id元素都是唯一的。一种方法是将循环index中的值附加for到id.

此外，您使用大写字母表示“名称”和“代码”，而不是 json 中使用的小写字母。

最后，您缺少div我在结束<li>元素之前添加的结束标记。

    $( document ).ready( function () {

    for ( var index = 0; index < snippets.length; index++ ) {

        $( "#snippets" ).append( '<li class="list-group-item"> <div id="snippet_name' + index + '" data-toggle="collapse" data-target="#codesnippet' + index + '">'

    + snippets[index].name + '</div> <div id="codesnippet' + index + '" class="collapse codesnippet javascript">'

    + '<pre><code class="javascript">'

    + snippets[index].code + '</code></pre></div></li>' );

     }

} );