单击按钮时 Nav 消失，这只需要 < 767

Question

单击按钮时我的导航消失，只有当视口小于 767 像素时才会发生这种情况。如果视口大于 767px 则不需要隐藏视口。

$(document).ready(function(){

    var $nav = $('#nav').
    prepend('<div class="responsive-nav" style="display:none">Navigation</div>').
    on('click', '.responsive-nav, ul a', function(evt) {
        if (evt.target.tagName === 'a' && $(window).innerWidth() >= 767) {
            return;
        }
        $nav.find('ul').slideToggle()
    });

    $(window).resize(function(){

        if ($(window).innerWidth() < 767) {
            $('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();

});

我在这里做了一个例子让你看看发生了什么： https://jsfiddle.net/jcj0kph2/5/

Answer 1

evt.target.tagName returns 大写的标签名称。

Reference

....On HTML elements in DOM trees flagged as HTML documents, tagName returns the element name in the uppercase form.

所以，在这里 returns A，将你的 if() 更改为

if (evt.target.tagName === 'A' .....)

或

if(evt.target.tagName.toLowerCase() === 'a'

Updated Fiddle

Answer 2

你也可以这样做

if (evt.target.tagName.toLowerCase() === 'a' && $(window).innerWidth() >= 767) {
    return;
}

在这种情况下，这两种情况都适用。

单击按钮时 Nav 消失，这只需要 < 767

Nav disappears when clicking on a button, this only needs to be at < 767

javascript

jquery

resize

nav