當點擊一個按鈕時導航消失，這隻需要在<767

當點擊一個按鈕時，我的導航消失，這隻有當視口是< 767px時纔會發生。如果視口大於767px，那麼視口不需要隱藏。當點擊一個按鈕時導航消失，這隻需要在<767

$(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/

來源

2016-06-13 Marc

當屏幕寬度超過767並且用戶點擊菜單項時，應該是什麼樣的行爲？ – pparas

我建議在CSS媒體查詢中定義一個類並單擊設置該類。那麼你的JS將不需要關心屏幕大小。 –

@pparas，必須始終可見（不切換）。 – Marc

evt.target.tagName在帽返回的標記名稱。

Reference

....在中標記爲HTML文檔DOM樹的HTML元素，標籤名返回的大寫形式的元素名稱。

所以，在這裏它返回A，改變你的if()到

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

或

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

Updated Fiddle

來源

2016-06-13 15:08:11

啊，你找到了。在某個時候，我把它鏈接成一個小小的「A」，沒有看到任何問題。我感到很蠢。 – Marc

@Marc，發生:)。我也必須在控制檯上進行調試，並且一開始就錯過了。 –

你也可以這樣做

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

在這種情況下，它將適用於這兩種情況。

來源

2016-06-13 15:28:00 pparas

當點擊一個按鈕時導航消失，這隻需要在<767

回答

相關問題