动态单页网站隐藏除每个父项的第一个子项之外的所有部分

Question

所以我有一个单页网站，当用户点击导航时，它会显示与锚中的ID相关联的div并隐藏所有其他div。工作得很好。

但是，我在这些div中有子节。它们正常工作，除了第一个子节不显示每个页面（父div）。

例如，如果我在“恢复”并单击“工作时间轴”，然后点击“项目”，它会隐藏“项目”页面的子部分，因为它被点击“恢复”。

当用户转到另一个页面（div）时，我可以做什么来覆盖它覆盖在另一个页面上发生的事情（div）

任何帮助将非常感激。 DEMO：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

它可能看起来像这样：

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

将功能应用于页面的所有节点，因为您必须知道祖先才能知道谁是第一个孩子。

我在这里几乎不使用jQuery（只有.hide（）方法），因为它不会有太大变化。

Answer 2

通过添加导航切换功能，我能够让它工作：

$（”小节：第一胎）.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'); 

                }
            };