0

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

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

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

4

4 回答 4

1

我不在 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();
        }
    }
于 2017-06-23T09:45:57.553 回答
1

Treeview css 类在无序列表中工作，因此任何子链接仅在单击父列表时才会显示。例如，如果您有“家”，然后有“关于”“关于位置”。当您单击关于它时，它是一个树视图类，并且在侧边栏上它将显示其下方的位置。当您单击主页时，将不会显示位置侧边栏链接，因为这是为列表编写 css 的方式。

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

于 2016-06-27T19:34:05.523 回答
0

这是供参考的代码。

/* 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();
      }
    });
  };
于 2016-08-11T15:46:22.157 回答
0

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

这对我有用:)

于 2017-06-16T13:05:38.653 回答