如何使用 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>元素之前添加的结束标记。&nbsp; &nbsp; $( document ).ready( function () {&nbsp; &nbsp; for ( var index = 0; index < snippets.length; index++ ) {&nbsp; &nbsp; &nbsp; &nbsp; $( "#snippets" ).append( '<li class="list-group-item"> <div id="snippet_name' + index + '" data-toggle="collapse" data-target="#codesnippet' + index + '">'&nbsp; &nbsp; + snippets[index].name + '</div> <div id="codesnippet' + index + '" class="collapse codesnippet javascript">'&nbsp; &nbsp; + '<pre><code class="javascript">'&nbsp; &nbsp; + snippets[index].code + '</code></pre></div></li>' );&nbsp; &nbsp; &nbsp;}} );