时间戳

首页 > 解决方案 > 如何使用引导程序创建可折叠菜单

javascript - 如何使用引导程序创建可折叠菜单

问题描述

我正在尝试构建一个代码片段 html 页面，我正在使用引导框架。

我的代码看起来像打击

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 + '</code></pre></li>' );

         }
    } );

</script>

我不确定我在这里缺少什么。第 2 行倒塌在这里没有按预期工作。例如，如果我有两个具有以下结构的片段

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

我得到两行alert和console。当我点击alert它的折叠和显示alert('message')代码但是当我点击它时console，我看不到它的代码。但是当我检查console部分时，我可以看到该代码，并且我也可以毫无问题地打印该对象。

任何建议都非常感谢。

谢谢你。

标签： javascriptjqueryhtmlcss

解决方案

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

此外，您对“名称”和“代码”使用大写字母，而不是 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>' );

     }
} );

希望有帮助。

推荐阅读