响应的topnav无法正常工作

Question

我遇到了响应式导航栏教程的问题我在网站上尝试（这里是： CodePen）。 我已经复制了我的html / css中的所有内容并在标签中添加了js，但是当我调整窗口大小时，它不会关闭导航栏并显示“打开”#s;＆＃39;像Codepen上的按钮，它只是垂直堆叠所有菜单项，我只能点击＆＃39; Home＆＃39;。 你能帮助我吗 ？我希望你不会需要一个JsFiddle来帮助我，因为我的主页非常复杂，在这里复制会很麻烦。

编辑：JSFIDDLE 好吧，我把这些代码放在这里，但是我们必须做的事情在我看来很无聊，浪费时间，我们可以把它放在两个标签之间吗？

<nav class="nav-collapse" role="navigation">
 <ul class="tabs primary-nav">
    <li class="tabs__item">
        <a href="#" class="tabs__link">Home</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Talks</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Schedule</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Location</a>
    </li>
    <li class="tabs__item">
        <a href="#" class="tabs__link">Contact</a>
    </li>
  </ul>
 <script>
 var navigation = responsiveNav(".nav-collapse", {
 animate: true,                   
 transition: 284,                  
 label: "Menu",                    
 insert: "before",                 
 customToggle: "",                
 closeOnNavClick: false,           
  openPos: "relative",             
  navClass: "nav-collapse",         
  navActiveClass: "js-nav-active",  
  jsClass: "js",                    
  init: function(){},               // Function: Init callback
   open: function(){},               // Function: Open callback
   close: function(){}               // Function: Close callback
  });
  </script>

   </nav>

  <script>
 var lastScroll = 0;
      $(window).scroll(function(event){
          //Sets the current scroll position
          var st = $(this).scrollTop();
          //Determines up-or-down scrolling
          if (st > lastScroll){
 //scrollbtn disappears when scrolled down
            $(".scrollbtn").fadeOut();
          } 
          else {
 //secondaryNav disappears when scrolled up
           $(".scrollbtn").css ("display","block");
          }
          //Updates scroll position
          lastScroll = st;
      });</script>
 <div class="parallax">

 <div class="messwrapper">

 <div class="message" style="display:none">
 <a class="animated fadeInUp"><center>Lorem 
 <span  class="hot">ipsum</span> whatever
 <span class="hot"message</span></center></a>
 </div>

 <div class="message2" style="display:none">
 <center><a class="animated fadeInUp">
 Ipsum<span class="hot">Lorem</span>  message</a></center>
 </div>

  </div>
  <script>
  setTimeout(function () {
   $('.message').show().addClass('animated fadeInDown');}, 1000);
   setTimeout(function () {
    $('.message2').show().addClass('animated fadeInLeft');}, 4000);

    setTimeout(function () {
    $('.wbdesign').show().addClass('animated fadeInUp');}, 7000);
   setTimeout(function () {
    $('.facebk').show().addClass('animated fadeInUp');}, 8000);
   setTimeout(function () {
    $('.advert').show().addClass('animated fadeInUp');}, 9000);
    setTimeout(function () {
    $('.identity').show().addClass('animated fadeInUp');}, 10000);
    setTimeout(function () {
    $('.strat').show().addClass('animated fadeInUp');}, 11000);
    setTimeout(function () {
    $('.more').show().addClass('animated fadeInUp');}, 12000);



    </script>
    <div class="iconswrapper">

    <div class="wbdesign" style="display:none">
    <img  src="images/wbdesign.png" style="width:50%" 
    class="animated  fadeInUp" /></div>
    <div class="facebk" style="display:none">
    <img src="images/Facebook.png"  
    style="width:50%" class="animated fadeInUp" /></div>
    <div class="advert" style="display:none">
    <img src="images/Advert.png"         style="width:50%" 
     class="animated  fadeInUp" /></div>
    <div class="identity" style="display:none">
    <img  src="images/identity.png" style="width:50%" 
    class="animated fadeInUp" /></div>
    <div class="strat" style="display:none">
    <img src="images/strat.png"  style="width:50%" 
       class="animated fadeInUp" /></div>
    <div class="more" style="display:none">
    <img src="images/MORE.png"     style="width:50%" 
    class="animated fadeInUp" /></div>
     </div>

     </div>


    <div class="parallax2">
   <div class="pix">
  <img src="Images/cHOC.png" style="height:50%;">
   </div>
      </div>

     <div class="parallax3">
     <div class="bgbox">
      <div class="box2"> 
      <div class="medias">
     <div class="pic1"><div class="pic4">
     <img src="Images/Iconmail.png"  style="width:100%;"></div>
     <script>
     $('.pic1')
     .mouseover(function() {
        $(this).addClass('animated pulse');})
        .mouseout(function(){
       $(this).removeClass('animated pulse');});
        $('.pic2')
          .mouseover(function() {
         $(this).addClass('animated pulse');})
           .mouseout(function(){
          $(this).removeClass('animated pulse');});

    $('.pic3')
      .mouseover(function() {
       $(this).addClass('animated pulse');})
         .mouseout(function(){
        $(this).removeClass('animated pulse');});

   $('.pic4')
     .mouseover(function() {
         $(this).addClass('animated pulse');})
       .mouseout(function(){
      $(this).removeClass('animated pulse');});

    </script></div>
</p>


 </p> 

  </p>

   </div>
    </div>
     <div id="footer">© 2017 "FIVE STARS .COM" All Rights Reserved</div>

            </div>