Onepage导航脚本需要在点击链接上点击/关闭

Question

我有一个带有响应式导航脚本的onepage网站。很棒。 当您点击导航按钮时，显示“subnav”链接。 （这些是锚点）。

我需要切换/关闭subnav时点击链接/锚点。

这里制造一个例子： https://jsfiddle.net/fourroses666/jcj0kph2/

脚本：

$(document).ready(function(){ 

    $('nav').prepend('<div class="responsive-nav" style="display:none">Navigation</div>'); 
    $('.responsive-nav').on('click',function(){ 
     $('nav ul').slideToggle() 
    }); 

    $(window).resize(function(){ 

     if ($(window).innerWidth() < 768) { 
      $('nav ul li').css('display','block'); 
      $('nav ul').hide() 
      $('.responsive-nav').show() 
     } else { 
      $('nav ul li').css('display','inline-block'); 
      $('nav ul').show() 
      $('.responsive-nav').hide() 
     } 

    }); 

    $(window).resize(); 

}); 

Answer 1

您可以通过做前插和安装单击处理程序都在一个声明，如下整理你的代码位。

var $nav = $('#nav'). 
    prepend('<div class="responsive-nav" style="display:none">Navigation</div>'). 
    on('click', '.responsive-nav, ul a', function() { 
     $nav.find('ul').slideToggle() 
    }); 

Updated fiddle

注：我以前$nav.find('ul')目标有关的特定资产净值相对于其他资产净值是可以存在于页面上。

编辑：要使其在> = 768时不会消失，请用以下代码替换$nav.find('ul').slideToggle()。

if (evt.target.tagName === 'A' && $(window).innerWidth() >= 768) { 
    return; 
} 
$nav.find('ul').slideToggle() 

Updated fiddle

Answer 2

我假设你想要的导航隐藏当你点击一个链接？

/* This executes when the nav or li (inside #nav) is pressed */ 
$('#nav').on('click', 'li, .responsive-nav', function(){ 
    $('nav ul').slideToggle() 
}); 

https://jsfiddle.net/jcj0kph2/1/