javascript - 导航/子导航列表，如何在页面重新加载后为点击的项目提供事件类

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. 希望清理子菜单的显示/隐藏点击功能。

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