Onepage導航腳本需要在點擊鏈接上點擊/關閉

Question

我有一個帶有響應式導航腳本的onepage網站。很棒。 當您點擊導航按鈕時，顯示「subnav」鏈接。 （這些是錨點）。

我需要切換/關閉subnav時點擊鏈接/錨點。

這裏製造一個例子： 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')目標有關的特定資產淨值相對於其他資產淨值是可以存在於頁面上。

編輯：要使其在> = 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/