jQuery附加功能损害功能

Question

我正在为一个简单的项目使用sb-admin-2引导模板 (模板演示)。左边的菜单有问题。

这是默认菜单项代码；

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

打开带有子菜单的菜单项时，如下所示：

​

当带有子菜单的菜单项关闭时，如下所示：

​

当我请求将项目添加到菜单时，它破坏了菜单项的显示/隐藏功能。当我单击接近"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);
        });
    }
});
});

​

​

我怎样才能解决这个问题？

Answer 1

在模板的sb-admin-2.js文件中，您可以调用Metis菜单函数，它启用了所需的功能。

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

我不知道什么时候进行ajax调用，但是在之后添加了菜单中的其他元素，您必须再次进行metisMenu调用(再次)。

只需在ajax调用之后输入

$(#侧菜单).append(NewMenuItem)；

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