Как создать складное меню, используя bootstrap

Question

Я пытаюсь построить страницу кода html, я использую bootstrap framework.

Мой код выглядит как удар

HTML

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

'); }});

Я не уверен, что мне здесь не хватает. Коллапс второго ряда не работает здесь, как ожидалось. Например, если у меня есть два фрагмента со структурой ниже

[
  {
    "name" : "alert",
    "code" : "alert('message')" ,
  },
  {
    "name" : "console",
    "code" : "console.log(message)",
  }
]

, я получаю две строки как alert и console. Когда я нажимаю alert, он сворачивается и показывает код alert('message'), но когда я нажимаю console, я не вижу его код. Но когда я проверяю секцию console, я вижу этот код и могу распечатать этот объект без каких-либо проблем.

Любые предложения с благодарностью.

Спасибо.

Answer 1

Поскольку вы создаете <li> элементов с for l oop, вы должны сделать каждый id уникальным. Одним из способов является добавление значения index из вашего for l oop к 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 + '

'); }});

Надеюсь, это поможет.