导航/子窗口列表，重新加载页面后如何给出点击项目活动类

我有几个嵌套和隐藏的子导航列表

 
Home
 
Profile 
 
Company
 
Structure
 
Team
 
 
 
Projects 
 
Chapter
 
Pblc Trde
 
Globe
 
Komforte
 
  

我目前正在使用一些我在网上找到的jQuery，点击后显示/隐藏子导航。 我想要完成的是：

1. 希望清理子菜单菜单的显示/隐藏点击function。

2. 当点击子导航菜单项时，打开的相应页面需要扩展子导航并给出相应的菜单项活动类，以便让用户知道他们所在的页面。

3. 我希望纯粹在JS / jQuery中这样做。 该网站的安装将在WordPress中。

    $(document).ready(function () { $(".profile").click(function () { var X = $(this).attr('id'); if (X == 1) { $("#profile").hide(); $(this).attr('id', '0'); } else { $("#profile").show(); $(this).attr('id', '1'); } }); //Mouse click on nav $("#profile").mouseup(function () {}); //Document Click $(document).mouseup(function () { $("#profile").hide(); $(".profile").attr('id', ''); }); $(".projects").click(function () { var X = $(this).attr('id'); if (X == 1) { $("#projects").hide(); $(this).attr('id', '0'); } else { $("#projects").show(); $(this).attr('id', '1'); } }); //Mouse click on nav $("#projects").mouseup(function () {}); //Document Click $(document).mouseup(function () { $("#projects").hide(); $(".projects").attr('id', ''); }); }); window.onload = function () { $("ul#profile li:first").addClass("active"); }; $(document).ready(function () { $("ul#profile").show() }); 

Answer 1

 $(document).ready(function() { // Get the name of the page. Split the URL at the '/':s and get the last part // with pop(): var pageName = (location.pathname).split('/').pop(); // If we couldn't get a page name, default to index.html: if( pageName == '' ) { pageName = 'index.html'; } // Hide ul:s that are children of the navigation: $('.nav ul').hide(); // Event handler for clicks on navigation links: $('.nav a').on('click', function() { // Change visibility for the first ul-child of the current li. // $(this) refers to the clicked element. $(this).parent('li').find('ul').first().toggle(); // Hide other sub-menus: $(this).parents('li').siblings('li').children('ul').hide(); }); // Search through all link elements in the nav menu: $('.nav').find('a').each(function(index, value) { // Append a '$' to the pagename to make the match()-function search // from the end of the href value: pageName += '$'; if( value.href.match(pageName)) { // If the pagename matches the href-attribute, then add the 'active' // class to the parent li, and show parent ul:s: $(this).parent('li').addClass('active').parents('ul').show(); } }); }); 

Answer 2

您可以使用Cookie来保存当前打开菜单的值。 这将允许在页面加载和浏览器会话之间保存/检索值。

由于您已经有jQuery设置，您可以使用jQuery Cookie插件来简化操作。

它的代码非常简单（插件页面上有更多示例）。

 $.cookie('open_menu', 'projects'); //Save 'projects' under 'open_menu' $.cookie('open_menu') //Returns 'projects' 

只需检查页面加载时的值，并在单击其中一个菜单时保存。

如果您不想添加任何额外的插件，请参阅JavaScript内置cookie API的一些文档。

编辑：我已经为您创建了一个带有示例的JSFiddle 。 Cookie代码似乎不适用于沙箱，但代码应该适合您，如果您有任何问题，请告诉我。

 $(window).load(function() { if ($.cookie('show_menu') !== undefined) { $('#' + $.cookie('show_menu')).click(); } $('.nav > li > ul').each(function () { //Hide the sub lists $(this).hide(); //Get link with same ID as Class var id = $(this).attr('id'); //When link is clicked $('.' + id).click(function () { //Get the sub list var list = $('#' + $(this).attr('class')); //Check if it's currently visible if (list.is(':visible')) { list.hide(); //Hide list $.cookie('show_menu', ''); //Unset open menu } else { $('.nav > li > ul').hide(); //Hide all other lists list.show(); //Show list $.cookie('show_menu', list.attr('class')); //Set open menu } }); }); });