영구 AdminLTE 사이드 바 상태

Question

장고 웹 사이트의 AdminLTE 세로 막대에서 일부 작업을 상속 받았습니다. 해당 페이지는 "확장"블록을 사용하여 AdminLTE의 index.html 페이지를 바로 박쥐에서로드합니다. 우리의 treeview 사이드 바에있는 링크는 사이드 바를 포함하여 전체 페이지가 다시로드되게하므로 누군가가 링크를 클릭 할 때마다 확장 된 treeview 메뉴의 상태가 손실됩니다.

사이드 바의 트리 뷰 메뉴를 열어 두는 잘 알려진 방법이 있지만 아직 찾지 못했습니다. AdminLTE 사이트에는 몇 가지 작업 예제가 있지만 작동 방식을 파악할 수는 없습니다.

페이지로드시 사이드 바를 영구히 유지할 수 있도록 누군가가 올바른 문서를 가리킬 수 있습니까?

Answer 1

Treeview CSS 클래스는 순서가 지정되지 않은 목록에서 작동하므로 상위 링크를 클릭하면 하위 링크 만 표시됩니다. 예를 들어 "집", "정보", "About-Locations"가있는 경우입니다. 정보를 클릭하면 트리보기 클래스이고 사이드 바에는 그 아래에 위치가 표시됩니다. 집을 클릭하면 위치 사이드 바 링크가 표시되지 않습니다. 이는 목록에 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

, 나는이 일을 위해 일을 MVC 면도기 응용 프로그램에서. 동일한 문제에 대해이 솔루션을 사용합니다. 메뉴에 클릭 된 링크를 저장합니다 (아약스는 서버 및 세션 저장소로 보내지 만 쿠키 또는 원하는 것을 사용할 수 있음). 클릭하면 아래의 자바 스크립트에 삽입됩니다 :

$(" 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(); 
     } 
    }