Держите меню дерева Запускать при загрузке страницы

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

Сценарий управляет epxantion и коллапс дерева меню в 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-данных между pageloads, но поскольку вы, похоже, не совсем удовлетворены сценарием 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'); 
 
     } 
 
    }); 
 
});

я не уверен, что вы намерены делать с slidetoggle, так что я оставил это в покое. Переместите его/измените, если нужно, чтобы сделать то, что вы хотите.

Редактировать: Просто понял, что у вас может быть несколько вещей в дереве, которое нужно развернуть. Вы все еще можете это сделать, но вместо хранения класса вы сохраните селектор дерева и внесите ли его расширение.