启动后更改 MMenu 内容答案

【问题标题】：Altering MMenu contents after initiation启动后更改 MMenu 内容
【发布时间】：2016-02-24 18:12:17
【问题描述】：

我有一个 MMenu 对象，我创建了一个自定义 CSS 类，它会显示圆形红色警报。只要li 元素之前中存在警告HTML，一切正常，MMenu 对象被启动。但是，这是有问题的，因为我需要使用 ajax 实时检查警报，如果存在新警报，我需要在加载后更新 MMenu HTML 。

有没有办法改变MMenu 列表的HTML/内容它已经启动？我在文档中读到您无法销毁 MMenu 实例，所以很遗憾我无法使用新的 HTML 销毁并重新创建它。

这是一个小提琴和我的示例 CSS，展示了我是如何做到这一点的。正如您在小提琴中看到的那样，代码应该在“请愿书”链接旁边加载带有数字“2”的相同红色气泡，就像“消息”警报一样，但简单地更改原始 HTML 不允许您更改什么显示在屏幕上。

https://jsfiddle.net/2r9tsmyn/9/

var API = $("#dashboard-menu").mmenu({
  extensions: ["fullscreen", "pageshadow", "pagedim-black", "iconbar", "theme-dark", "border-full", "effect-menu-slide", "effect-listitems-slide"],
  offCanvas: {
    position: "left"
  },
  navbar: {
    title: "Dashboard"
  }
}).data("mmenu");
$(".dashboard-link").click(function(e) {
  e.preventDefault();
  API.open();
});

$("#dashboard-menu .mm-title").addClass('ani').css('cursor', 'pointer').click(function() {
  API.close();
});


$('li.mm-peition a').append('<div class="mm-alert">2</div>');

CSS

.dashboard-menu ul li a {
  position: relative !important;
  display: block !important;
}

.mm-alert {
  display: inline-block !important;
  float: right !important;
  position: absolute;
  top: 10px;
  right: 20px;
  width: 24px;

【问题讨论】：

标签： javascript jquery mmenu

【解决方案1】：

所以，我看了一下你的小提琴，虽然你的 jQuery 选择器中有拼写错误，但你有

$('li.mm-peition a').append('<div class="mm-alert">2</div>');

请注意请愿书的错误拼写。当我演奏你的小提琴时开始工作了。

也就是说，如果您希望对菜单进行动态更改，请查看动态内容文档：http://mmenu.frebsite.nl/tutorials/dynamic-content.html

虽然菜单上没有 destroy 方法，但您可以使用 jQuery 进行更改，然后调用：

API.initPanels( $("#my-list") ); 如果您愿意，可以作为您的基本列表面板。

我遇到的一个问题是，当您添加一个面板时，您需要在要添加的列表项中找到该面板，并按照文档中的说明附加到该面板。

#my-list was an UL, now is a panel $("#my-list").find( ".mm-listview" ).append( li );

在此之后调用 initalise 应该可以正常工作。

【讨论】：