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

中树形菜单的epxantion和collapse

脚本存储在〜/ 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上的专家，但只要您可以获得有关设置导航菜单的活动页面的信息，就可以使用此信息添加课程＆＃34; Treeviewexpand＆＃34;到需要扩展的菜单点。

然后将您的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的本地存储空间中。

所以你可以做到

＆＃13;

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

＆＃13;

我不确定你打算用滑动按钮做什么，所以我就把它留下了。移动它/在需要的地方改变你想做的事情

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

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

2 个答案: