Question

我正在使用sb-admin-2 bootstrap template（template demo）来完成一个简单的项目。我在左侧菜单上遇到了麻烦。

这是默认菜单项代码;

<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
    <li>
        <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
    </li>
    <li>
        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="flot.html">Flot Charts</a>
            </li>
            <li>
                <a href="morris.html">Morris.js Charts</a>
            </li>
        </ul>
        <!-- /.nav-second-level -->
    </li>
    <li>
        <a href="tables.html"><i class="fa fa-table fa-fw"></i> Tables</a>
    </li>
    <li>
        <a href="forms.html"><i class="fa fa-edit fa-fw"></i> Forms</a>
    </li>
    <li>
        <a href="#"><i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="panels-wells.html">Panels and Wells</a>
            </li>
            <li>
                <a href="buttons.html">Buttons</a>
            </li>
            <li>
                <a href="notifications.html">Notifications</a>
            </li>
            <li>
                <a href="typography.html">Typography</a>
            </li>
            <li>
                <a href="grid.html">Grid</a>
            </li>
        </ul>
        <!-- /.nav-second-level -->
    </li>
    <li>
        <a href="#"><i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Second Level Item</a>
            </li>
            <li>
                <a href="#">Second Level Item</a>
            </li>
            <li>
                <a href="#">Third Level <span class="fa arrow"></span></a>
                <ul class="nav nav-third-level">
                    <li>
                        <a href="#">Third Level Item</a>
                    </li>
                    <li>
                        <a href="#">Third Level Item</a>
                    </li>
                    <li>
                        <a href="#">Third Level Item</a>
                    </li>
                    <li>
                        <a href="#">Third Level Item</a>
                    </li>
                </ul>
                <!-- /.nav-third-level -->
            </li>
        </ul>
        <!-- /.nav-second-level -->
    </li>
    <%--
    <li>
        <a href="#"><i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="blank.html">Blank Page</a>
            </li>
            <li>
                <a href="login.html">Login Page</a>
            </li>
        </ul>
        <!-- /.nav-second-level -->
    </li>
     --%>
</ul>

打开带子菜单的菜单项时看起来像这样：
opened menu

当子菜单的菜单项关闭时，它看起来像这样：
closed menu

当我向菜单添加项目的ajax请求时，它会破坏菜单项的显示/隐藏功能。当我点击“Ajax加载的菜单项”附近的箭头时，没有处理任何事件。这是我的代码和破损菜单项的截图;

$(document).ready(function() {
$.ajax({
    url     :   "/loadMenuItems",
    success :   function(result)
    {
        var menuList = result.menuList; 

        $.each(menuList, function(menuIndex, menuItem) {

            var newMenuItem =   '<li> ' +
                                '   <a href="#"><i class="fa fa-files-o fa-fw"></i>' + menuItem.itemHeader + '<span class="fa arrow"></span></a>' +
                                '   <ul class="nav nav-second-level"> ' +
                                '       <li> ' + 
                                '           <a href="blank.html">' + menuItem.item1 + '</a> ' +
                                '       </li> ' + 
                                '       <li> ' +
                                '           <a href="login.html">' + menuItem.item2 + '</a> ' + 
                                '       </li> ' +
                                '   </ul> ' +
                                '</li> ';

            $('#side-menu').append(newMenuItem);
        });
    }
});
});

broken menu

如何解决此问题？

Answer 1

在模板的sb-admin-2.js文件中，您可以对Metis菜单功能进行以下调用，该功能可以启用您想要的功能。

$('#side-menu').metisMenu();

我不知道你何时进行了ajax通话，但之后你将其他元素添加到菜单中，你必须再次调用这个metisMenu。

在

之后输入你的ajax电话

$（＆＃39;＃侧面菜单＆＃39）。追加（newMenuItem）;

也许您已将其从sb-admin-2.js文件中删除。试验它。但是，在附加项目后进行$('#side-menu').metisMenu();调用对于功能至关重要。

jQuery追加功能损坏功能

1 个答案: