導航/ Subnav列表，如何

Question

頁

的重載之後給單擊項目活動類我有幾個嵌套&隱藏子導航列表

<ul class="nav"> 
<li><a href="index.html">Home</a></li> 
<li><a class="profile" href="#">Profile</a> 
    <ul id="profile"> 
     <li><a href="company.html">Company</a></li> 
     <li><a href="structure.html">Structure</a></li> 
     <li><a href="team.html">Team</a></li> 
    </ul> 
</li> 

<li><a class="projects" href="#">Projects</a> 
    <ul id="projects"> 
     <li><a href="chapter.html">Chapter</a></li> 
     <li><a href="pblc-trde.html">Pblc Trde</a></li> 
     <li><a href="globe.html">Globe</a></li> 
     <li><a href="komforte.html">Komforte</a></li> 
    </ul> 
</li>  

我目前使用的一些jQuery的我在網上找到點擊時顯示/隱藏子導航。我試圖完成的是：

1. 希望清理sub-nab菜單的顯示/隱藏點擊功能。

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 plugin來簡化事情。

它的代碼非常簡單（更多插件頁面示例）。

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

只需檢查頁面加載的值，並在單擊其中一個菜單時將其保存。

如果你不想添加額外的插件，這裏有一些關於JavaScript's inbuilt 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 
     } 
    }); 
}); 
});