Liste Nav/Subnav, comment donner à l'élément cliqué la classe active après le rechargement de la page ?

Question

J'ai plusieurs listes de sous-navigation imbriquées et cachées.

<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>    

J'utilise actuellement quelques jQuery que j'ai trouvés en ligne pour afficher/masquer le sous-navigateur en cas de clic. Ce que j'essaie d'accomplir est le suivant :

1. J'espère pouvoir nettoyer la fonction de clic pour afficher/masquer les menus des sous-répertoires.

2. Lorsque l'on clique sur les éléments du menu de la sous-navigation, la page correspondante qui s'ouvre doit avoir la sous-navigation développée et donner à l'élément de menu correspondant la classe active, afin que l'utilisateur sache sur quelle page il se trouve.

3. J'espère pouvoir le faire uniquement en JS/jQuery. L'installation du site se fera sous 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()
   });