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

Question

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

$(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 以大写形式返回标签​​名称。

Reference

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

所以，这里它返回A，把你的if()改成

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

或

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

Updated Fiddle