一页导航脚本需要在点击 link 时切换/关闭

Question

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

我需要 toggle/close 单击 link/anchor 时的子导航。

这里举个例子： 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

我假设您希望在单击 link 时隐藏 Nav？

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

Answer 2

您可以通过如下所示在一个语句中添加和附加点击处理程序来稍微整理一下您的代码。

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

一页导航脚本需要在点击 link 时切换/关闭

Onepage navigation script needs to troggle / close on click on link

javascript

jquery

nav

responsive-design