Question

我正在使用动态<div> MetisMenu。当我在此<div>下加载新的子菜单时，该插件将停止运行。

有没有办法在AJAX调用的成功部分重置插件？我试过了：

$('#menu').metisMenu({
   toggle: false // disable the auto collapse. Default: true.
});

但它不起作用。

Answer 1

MetisMenu无法多次调用，因为它在其生命周期内仅调用init()次函数。

所以这意味着如果您使用ajax异步加载元素<div id="menu">的内容，之后<div id="menu">再次将事件绑定到$('#menu').metisMenu();将不会有任何区别。

所以你要做的就是首先销毁现有的metismenu事件处理程序，然后创建一个新的，如下所示：

$('#menu').metisMenu('dispose'); //to stop and destroy metisMenu
$('#menu').metisMenu();

下面的代码是angularjs

var app = angular.module('appControllers', []);

app.controller('MenuCtrl', ['$scope', '$http',
  function ($scope, $http) {
      var url = "/api/Menus/GetMenuElements";
      $http.post(url).
        success(function (data, status, headers, config) {
            angular.element("#menu").metisMenu('dispose');  //Destroy the existing metisMenu

            //---- Update You div with data -----//

            angular.element("#menu").metisMenu(); //Create new binding
        }).
        error(function (data, status, headers, config) {
            console.log("Error");
        });
  }]);

Answer 2

调用

$('#menu').metisMenu()

应该足以使MetisMenu知道您通过AJAX调用添加的任何新列表元素。

确保您已将新对象添加为菜单<li>下的<ul>元素。还要在调用metisMenu之前检查您是否实际更新了DOM（而不仅仅是从服务器检索新对象）。

（请注意，toggle选项显然不会更改菜单的初始外观，该菜单最初会折叠并需要点击才能展开。）

异步加载数据后重置MetisMenu

2 个答案: