Динамический одностраничный сайт, который скрывает все разделы, кроме первого потомка каждого родителя

Question

Итак, у меня есть одностраничный сайт, который, когда пользователь нажимает на навигацию, показывает, что div связан с идентификатором в привязке, и скрывает все остальные div. Получил, что работает хорошо.

Однако у меня есть подразделы в этих разделах. Они работают нормально, за исключением того, что первый дочерний раздел не отображается на каждой странице (родительский раздел).

Например, если я нахожусь на «Резюме» и нажимаю «График работы», а затем нажимаю «Проекты», он скрывает подраздел раздела «Проект» из-за нажатия на «Резюме».

Есть ли что-то, что я могу сделать, чтобы переопределить, когда пользователи переходят на другую страницу (div), это переопределяет то, что происходит на другой странице (div)

Любая помощь будет очень признательна. ДЕМО: https://www.kevinhenriquez.com/projects/full/

HTML-код:

<nav>
 <ul>
    <li><a href="#cover" data-action="nav">Home</a></li>
    <li><a href="#projects" data-action="nav">Projects</a></li>
    <li><a href="#resume" data-action="nav">Resume</a></li>
    <li><a href="#about" data-action="nav">About</a></li>
    <li><a href="#contact" data-action="nav">Contact</a></li>
 </ul>
</nav>

<section id="cover" class="page-section">
........
</section>

<section id="projects" class="page-section">

      <section id="portfolio-sites" class="sub-section">
         ..................
      </section>
      <section id="client-sites" class="sub-section">
         ................................
      </section>

      <div class="page-section-nav">
        <ul>
           <li><a href="#portfolio-sites" data-action="sub">Portfolio</a></li>
            <li><a href="#client-sites" data-action="sub">Client</a></li>
           <li><a href="#school-sites" data-action="sub">School</a></li>
        </ul>
      </div>

</section>

<section id="resume" class="page-section">

      <section id="work-timeline" class="sub-section">
         ..................
      </section>
      <section id="technologies" class="sub-section">
         ................................
      </section>

      <div class="page-section-nav">
        <ul>
           <li><a href="#work-timeline" data-action="sub">Timeline</a></li>
           <li><a href="#technologies" data-action="sub">Technologies</a></li>
        </ul>
      </div>

</section>

Javascript код:

$(document).ready(function () { 

    var pageSection = $('.page-section');
    var subSection = $('.sub-section');

    var navLink = $('nav ul li a');
    var subLink = $('.page-section-nav li a');

    var sectionToggle = {
      nav:   
        function (event) { 
            pageSection.hide();
            $(this.getAttribute('href')).show();

            navLink.removeClass('highlight');
            $(this).addClass('highlight');
            $('#nav-trigger').prop( "checked", false);
        },

      sub: 
        function (event) {
            subSection.hide();
            $(this.getAttribute('href')).show();

            subLink.removeClass('highlight');
            $(this).addClass('highlight'); 

        }
    };


    pageSection.not(":first").hide();
    subSection.not(":first").hide();

    $("a[data-action]").on("click", function (event) {
      var link = $(this),
          action = link.data("action");

      event.preventDefault();

      if( typeof sectionToggle[action] === "function" ) {
        sectionToggle[action].call(this, event);
      } 

    });

});

Answer 1

Я смог заставить его работать, добавив функцию переключения:

$ (». Подраздел: первый-ребенок) .show ();

и удаление:

subSection.not ( "первый") скрыть ();.

Спасибо за помощь. Вот что я сделал:

var sectionToggle = {
              nav:   
                function (event) { 
                    pageSection.hide();
                    $(this.getAttribute('href')).show();
                    $('.sub-section:first-child').show();

                    navLink.removeClass('highlight');
                    $(this).addClass('highlight');
                    $('#nav-trigger').prop( "checked", false);
                },

              sub: 
                function (event) {
                    subSection.hide();
                    $(this.getAttribute('href')).show();

                    subLink.removeClass('highlight');
                    $(this).addClass('highlight'); 

                }
            };

Answer 2

Это может выглядеть так:

function hideNotFirstChild(ancestor){
    let allchilds=ancestor.children;
    for each(allchilds as child ){
        if(child!=ancestor.firstchild){
            child.hide();
        }
    }
}

Применяется функция ко всем узлам страниц, потому что вы должны знать предка, чтобы узнать, кто первый ребенок.

Iздесь почти не используется jQuery (только метод .hide ()), потому что он не сильно изменится.