在页面加载时保持树状菜单打开

Question

我有下面的 Jquery 脚本（我不太了解，因为以前从未使用过它）

$(document).ready(function () {
    $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();
        $(this).toggleClass("Treeviewcollapse Treeviewexpand");
        $(this).closest('li').children('ul').slideToggle();
    });
});

脚本控制ASP.net mvc 5中树形菜单的展开和折叠

脚本存储在 ~/Scripts/Treeview.js 并从 ASP.NET mvc _Layout 页面调用

但是，当我单击树形菜单上的链接以打开新内容页面时，它会折叠树形菜单。有没有办法让树形菜单在页面点击时保持打开状态？

一切都基于此：

http://dotnetawesome.blogspot.co.uk/2014/06/how-to-create-treeview-with-database-data-mvc4-aspnet.html

Answer 1

对此有很多可能的解决方案。

问题在于 Javascript 不记得页面加载之间的状态（变量、DOM 配置等）。有多种方法可以让 Javascript 数据在页面加载之间保持不变，但由于您似乎对 jQuery 脚本并不完全满意，因此您可能希望主要从服务器端解决这个问题。

我不是 ASP.net mvc 5 方面的专家，但只要您能获得有关设置导航菜单的活动页面的信息，就可以使用这些信息将“Treeviewexpand”类添加到菜单中需要扩展的点。

然后将您的 jQuery 更改为：

$(document).ready(function () {
    $(".treeview li>ul").each(function(){
        if(!$(this).hasClass('Treeviewexpand')){
            $(this).css('display', 'none'); // Hide all 2-level ul
        }
    });
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();
        $(this).toggleClass("Treeviewcollapse Treeviewexpand");
        $(this).closest('li').children('ul').slideToggle();
    });
});

在此处查看工作示例：https://jsfiddle.net/1xjr1ndf/

Answer 2

您可以将树形菜单的状态存储在 HTML5 的本地存储中。

所以你可以这样做

$(document).ready(function () {
  var treeState = localStorage.getItem('treeState');
  var treeClass = treeState ? treeState : 'Treeviewcollapse';

  $(".Treeviewcollapsible").addClass(treeClass);

    $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
    $(".Treeviewcollapsible").click(function (e) {
        e.preventDefault();   
        
        $(this).closest('li').children('ul').slideToggle();

        if ($(this).hasClass('Treeviewcollapse')) {
          $(this).removeClass('Treeviewcollapse').addClass('Treeviewexpand');
          localStorage.setItem('treeState', 'Treeviewexpand');
        } else {
          $(this).removeClass('Treeviewexpand').addClass('Treeviewcollapse');
          localStorage.setItem('treeState', 'Treeviewcollapse');
        }
    });
});

我不确定您打算对滑动切换做什么，所以我不理会它。在需要的地方移动/更改它以做你想做的事

编辑：刚刚意识到您在树中可能有多个要扩展的东西。您仍然可以这样做，但不是存储类，而是存储树的选择器以及它是否被扩展。