Постоянное состояние боковой панели AdminLTE

Я унаследовал некоторые работы на боковой панели AdminLTE на веб-сайте Django. Эта страница использует блок "extends" для загрузки страницы index.html AdminLTE сразу. Ссылки на нашей боковой панели древовидной структуры приводят к перезагрузке всей страницы, включая боковую панель, поэтому состояние любого расширенного меню древовидной структуры теряется всякий раз, когда кто-то нажимает на ссылку.

Я предполагаю, что есть какой-то известный способ заставить боковое меню держать меню в виде дерева открытыми, но я пока не нашел его. На сайте AdminLTE есть несколько рабочих примеров, но я не могу понять, как они работают.

Может ли кто-нибудь указать мне правильный документ, который поможет сделать мою боковую панель постоянной при загрузке страницы?

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

Класс Treeview css работает в неупорядоченном списке, поэтому любые дочерние ссылки отображаются только при щелчке по родительскому списку. Примером этого является то, что если у вас есть "home", а затем "About" "About-Locations". Когда вы нажимаете О, это класс в виде дерева, и на боковой панели он показывает местоположения под ним. Когда вы щелкаете по домашней странице, ссылка на боковую панель местоположений не будет отображаться, поскольку именно так написана CSS для списка.

Код можно найти в файле "AdminLTE.css".

Я использовал встроенную функциональность, упомянутую @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
    });
}}

Это сработало для меня:)

Вот код для справки.

/* 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();
      }
    });
  };
Другие вопросы по тегам