持久的AdminLTE侧边栏状态

Question

我在Django网站上继承了一些AdminLTE侧边栏的工作。有问题的页面使用“扩展”块来立即加载AdminLTE的index.html页面。我们的treeview侧边栏上的链接会导致整个页面重新加载，包括侧边栏，因此任何展开的treeview菜单的状态都会在有人单击链接时丢失。

我猜有一些众所周知的方法可以让侧边栏保持其treeview菜单打开，但我还没有找到它。AdminLTE站点上有一些可用的示例，但我不知道它们是如何工作的。

有没有人能给我指出正确的文档，帮助我让侧边栏在页面加载时保持不变？

Answer 1

Treeview css类在无序列表中工作，因此只有在单击父列表时才会显示任何子链接。例如，如果你有"home“，然后是"About”，"About-Locations“。当你点击它时，它是一个树视图类，在侧边栏上，它将显示它下面的位置。单击主页时，不会显示位置侧边栏链接，因为这是为列表编写css的方式。

代码可以在"AdminLTE.css“文件中找到。

Answer 2

我没有在django上工作，我在MVC Razor应用程序上工作。对于同样的问题，我使用这个解决方案:我存储菜单上单击的链接(ajax send到服务器和会话存储，但您可以使用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();
        }
    }

Answer 3

这是供参考的代码。

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