引导子菜单 JSON答案

【问题标题】：Bootstrap Submenu JSON引导子菜单 JSON
【发布时间】：2015-11-22 04:23:03
【问题描述】：

我正在尝试创建一个从 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();
});

【问题讨论】：

<ul class="dropdown-menu" id="dropdownMenu"> </ul> 应该在选择标签内吗？

标签： javascript json twitter-bootstrap

【解决方案1】：

[解决方案]

先创建列表。

之后，调用 submenupicker() 函数。

这是我的代码。 :)

1. 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">
            <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>

【讨论】：