Question

我有一个带有响应式导航脚本的onepage网站。效果很好。当您单击导航按钮时，＆＃34; subnav＆＃34;链接出现了。（这些是锚点）。

我需要在点击链接/锚点时切换/关闭子区域。

在这里举个例子： 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')来定位相关的特定导航，而不是页面上可能的其他导航。

修改：要在＆gt; = 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/

单击导航脚本需要在点击链接上进行切换/关闭

2 个答案: