引导子菜单JSON

Bootstrap Submenu JSON

本文关键字：JSON 菜单      更新时间：2023-09-26

我正在尝试创建一个从JSON加载的引导子菜单。但是，只显示第一个列表，而不是两个列表。

下面是HTML:

<section class="btn-group">
<button type="button" class="btn btn-default">Line Item</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" id="dropdownMenu">
</ul>
</section>

JSON:

<script type="text/javascript">
$('.dropdown-submenu > a').submenupicker();
var jsonList = {"List" : [
    {"liName" : "Income"},
    {"liName" : "Cash Flow"},
    {"liName" : "Balance Sheet"},
    {"liName" : "Per Share", "liName2" : "CFPS"}
]}
$(document).ready(function(){
    var listItems = "";
    for (var i = 0; i < jsonList.List.length; i++) {
        listItems += "<li class='dropdown-submenu'><a tabindex='-1' href='#'>" + jsonList.List[i].liName + "</a><ul class='dropdown-menu'><li><a href='#'>" + jsonList.List[i].liName2 + "</a></li></ul></li>";
    }
    $("#dropdownMenu").append(listItems);
    $("#dropdownMenu").html();
});

[Solution]

  1. 先创建列表
  2. 之后，调用submenupicker()函数
这是我的代码。:)

1。 

<section class="btn-group">
        <button type="button" class="btn btn-default">Line Item</button>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu" id="dropdownMenu"></ul>
    </section>

2。Javascript 

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-submenu.min.js"></script>
<script type="text/javascript">
        var jsonList = {"List" : [
                                {"liName" : "Income"},
                                {"liName" : "Cash Flow"},
                                {"liName" : "Balance Sheet"},
                                {"liName" : "Per Share", "liName2" : "CFPS"}
                            ]};
        $(document).ready(function() {
            var list_item_html = "";
            var submenu_html = "";
            var main_item = "";
            var submenu_item = "";
            for (var i = 0; i < jsonList.List.length; i++) {
                main_item = jsonList.List[i].liName;
                submenu_item = jsonList.List[i].liName2;
                submenu_html = "";
                if(main_item != null && submenu_item != null) {
                    submenu_html = "<li class='dropdown-submenu'>"
                                    + "<a tabindex='0' data-toggle='dropdown'>" + main_item + "</a>"
                                    + "<ul class='dropdown-menu'>" 
                                        + "<li><a href='#' tabindex='0'>" + submenu_item + "</a></li>" 
                                    + "</ul>"
                                   +"</li>";
                    list_item_html += submenu_html;
                } else {
                    list_item_html += "<li><a href='#'>" + main_item + "</a></li>";
                }
            }
            $("#dropdownMenu").html(list_item_html);      // 1. Create List
            $('.dropdown-submenu > a').submenupicker();   // 2. After, call submenupicker function.
        });
    </script>
相关文章：