2016-02-24 78 views
0

我有一個MMenu對象,我創建了一個自定義CSS類,它將顯示循環紅色警報。一切工作正常,只要提示HTML存在於li元素之前MMenu對象被啓動。然而,這是有問題的,因爲我需要使用ajax實時檢查警報,如果出現新警報,我需要在加載後更新MMenu HTML 啓動後更改MMenu內容

有沒有辦法在之後修改MMenu列表中的HTML /內容?我在文檔中看過你不能銷燬一個MMenu實例,所以不幸的是我不能銷燬並用新的HTML重新創建它。

這裏是一個小提琴和我的示例CSS顯示我如何做到這一點。正如你可以在小提琴中看到的,代碼應該加載與「請願」鏈接旁邊的數字「2」相同的紅色氣泡,就像「消息」警報一樣,但只是改變原始的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; 

回答

1

所以,我看了看你的小提琴,它着眼於雖然有是一個拼寫錯誤的jQuery選擇器,你有

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

註上訪的不正確的拼寫。當我跑上你的小提琴時, 開始工作。

這就是說,如果你正在尋找使動態變化,以您的菜單看看對動態內容的文檔:雖然不是你可以在菜單上一個破壞方法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後本應正常工作。