javascript - 启动后更改 MMenu 内容

Question

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

有没有办法在 MMenu 列表启动后更改其 HTML/内容？我在文档中读到，您无法销毁 MMenu 实例，因此不幸的是，我无法销毁并使用新的 HTML 重新创建它。

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

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

JS

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;

Answer 1

所以，我看了一下你的 fiddle ，它看起来虽然你的 jQuery 选择器中有一个拼写错误，但你有

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

note the incorrect spelling of petition. When I ran your fiddle it started working.

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

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

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

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

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

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