持久AdminLTE側欄狀態

Question

我在Django網站上的AdminLTE側欄上繼承了一些工作。有問題的頁面使用「擴展」塊來加載AdminLTE的index.html頁面。我們的樹狀視圖邊欄上的鏈接會導致整個頁面重新加載（包括邊欄），因此任何展開的樹視圖菜單狀態都會在有人點擊鏈接時丟失。

我猜這裏有一些衆所周知的方式使邊欄保持其樹視圖菜單打開，但我還沒有找到它。 AdminLTE網站上有一些工作示例，但我無法弄清楚它們是如何工作的。

有人可以指向我正確的一塊文檔，以幫助我讓我的側邊欄持續跨頁加載嗎？

Answer 1

Treeview css類在無序列表中工作，因此任何子鏈接僅在父列表單擊時顯示。例如，如果您有「家」，然後「關於」「關於 - 位置」。當你點擊關於它時，它是一個樹形視圖類，在側邊欄上它將顯示它下面的位置。當您點擊home時，位置邊欄鏈接將不會顯示，因爲這是如何爲列表編寫CSS的。

該代碼可以在「AdminLTE.css」文件中找到。

Answer 2

以下是供參考的代碼。

/* Tree() 
    * ====== 
    * Converts the sidebar into a multilevel 
    * tree view menu. 
    * 
    * @type Function 
    * @Usage: $.AdminLTE.tree('.sidebar') 
    */ 
    $.AdminLTE.tree = function (menu) { 
    var _this = this; 
    var animationSpeed = $.AdminLTE.options.animationSpeed; 
    $(menu).on('click', 'li a', function (e) { 
     //Get the clicked link and the next element 
     var $this = $(this); 
     var checkElement = $this.next(); 

     //Check if the next element is a menu and is visible 
     if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) { 
     //Close the menu 
     checkElement.slideUp(animationSpeed, function() { 
      checkElement.removeClass('menu-open'); 
      //Fix the layout in case the sidebar stretches over the height of the window 
      //_this.layout.fix(); 
     }); 
     checkElement.parent("li").removeClass("active"); 
     } 
     //If the menu is not visible 
     else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) { 
     //Get the parent menu 
     var parent = $this.parents('ul').first(); 
     //Close all open menus within the parent 
     var ul = parent.find('ul:visible').slideUp(animationSpeed); 
     //Remove the menu-open class from the parent 
     ul.removeClass('menu-open'); 
     //Get the parent li 
     var parent_li = $this.parent("li"); 

     //Open the target menu and add the menu-open class 
     checkElement.slideDown(animationSpeed, function() { 
      //Add the class active to the parent li 
      checkElement.addClass('menu-open'); 
      parent.find('li.active').removeClass('active'); 
      parent_li.addClass('active'); 
      //Fix the layout in case the sidebar stretches over the height of the window 
      _this.layout.fix(); 
     }); 
     } 
     //if this isn't a link, prevent the page from being redirected 
     if (checkElement.is('.treeview-menu')) { 
     e.preventDefault(); 
     } 
    }); 
    }; 

Answer 3

我已經使用@MDT提到的內置功能，並創建了一個功能：

function toggleCollapsibleList(){ 

//Get the clicked link and the next element 
var $this = $('#parent-list-item-id'); 
var checkElement = $('#an-id-for-collapsible-li-with-treeview-class'); 

//Check if the next element is a menu and is visible 
if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible')) && (!$('body').hasClass('sidebar-collapse'))) { 
    //Close the menu 
    checkElement.slideUp(500, function() { 
     checkElement.removeClass('menu-open'); 
     //Fix the layout in case the sidebar stretches over the height of the window 
     //_this.layout.fix(); 
    }); 
    checkElement.parent("li").removeClass("active"); 
} 
//If the menu is not visible 
else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) { 
    //Get the parent menu 
    var parent = $this.parents('ul').first(); 
    //Close all open menus within the parent 
    var ul = parent.find('ul:visible').slideUp(500); 
    //Remove the menu-open class from the parent 
    ul.removeClass('menu-open'); 
    //Get the parent li 
    var parent_li = $this.parent("li"); 

    //Open the target menu and add the menu-open class 
    checkElement.slideDown(500, function() { 
     //Add the class active to the parent li 
     checkElement.addClass('menu-open'); 
     parent.find('li.active').removeClass('active'); 
     parent_li.addClass('active'); 
     //Fix the layout in case the sidebar stretches over the height of the window 
    }); 
}} 

這爲我工作:)

Answer 4

我不是在Django的工作，我的工作在MVC Razor應用程序上。 對於同樣的問題，我使用這個解決方案： 我存儲鏈接點擊菜單（ajax發送到服務器和會話存儲，但你可以使用cookie或你想要的）。 點擊鏈接插入下面的java腳本中：

$(" ul.treeview-menu > li > a").on("click", function() 
    { 
     if (this.href == "#") 
      return; 
     $.ajax({ 
      type: "POST", 
      url: '/Outils/SetActiveMenu', 
      data: { url: this.href }, 
      dataType: "json" 
     }); 
    }) 
    $(document).ready(function() { 
     var v = "@Html.Raw(Session["ActiveMenu"] == null?"": Session["ActiveMenu"].ToString())"; 
     if(v == "") return; 
     var a = $('a[href="' + v + '"]'); 
     openParentMenu(a); 
     a.css("background-color", "#E3E6E5"); 
    }); 
    function openParentMenu(item) 
    { 
     var parent = item.parent().closest("li.treeview"); 
     if (parent.length != 0) { 
      openParentMenu(parent); 
      parent[0].children.item("a").click(); 
     } 
    }