Question

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

我猜测有一些众所周知的方法可以让侧边栏保持其树视图菜单打开，但我还没有找到它。 AdminLTE网站上有一些工作示例，但我无法弄清楚它们是如何工作的。

有人能指出我正确的文档，以帮助我使我的侧边栏在页面加载中保持不变吗？

Answer 1

Treeview css类在无序列表中工作，因此任何子链接仅在单击父列表时显示。这方面的一个例子是，如果你有＆＃34; home＆＃34;然后＆＃34;关于＆＃34; ＆＃34;关于-地点＆＃34 ;.单击“关于”时，它是一个树视图类，在侧栏上将显示其下方的位置。当您单击home时，将不会显示位置侧栏链接，因为这是为列表编写css的方式。

代码可以在＆＃34; AdminLTE.css＆＃34;中找到。文件。

Answer 2

我没有使用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();
        }
    }

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

Answer 4

我使用了@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
    });
}}

这对我有用：）

持久AdminLTE侧边栏状态

4 个答案: