我在我的單頁網站上使用Zurb基金會的固定頂欄，並且它包含頁面內地點的錨鏈接。我希望這樣，只要點擊擴展移動菜單中的鏈接，菜單就會關閉。如何在點擊鏈接時關閉Foundation的頂欄菜單？
當前，單擊鏈接時，頁面會滾動，但菜單在頁面頂部保持打開狀態。
在之前的Foundation版本中，我能夠對代碼進行反向工程並找到一個簡單的解決方案。自從更新到4.3.1來修復頂欄的另一個問題後，由於我對javascript的知識有限，我無法找到解決方案。
在我看來，如果被點擊菜單中的鏈接時，我可以火菜單關閉事件或功能，將它固定。以前，我把我的代碼發生在點擊行261上的鏈接上。
當移動菜單關閉時，.fixed被添加到頂欄的div上，而.expanded和.fixed從.topbar div 。
你可以嘗試加入一些jQuery的摺疊菜單，當你點擊一個鏈接。
您可以添加包裝在腳本元素中的代碼。將它放在所有html元素（body元素內）之後。你也可以把它放在一個單獨的JavaScript文件中，你可以像其他任何JavaScript文件一樣來源。確保你在jQuery鏈接之後放置該鏈接。
代碼本身可以非常簡單，因爲它看起來像基礎當您切換菜單圖標打開和關閉時，嚮導航欄添加名爲「展開」的類。所以當有人點擊你的按鈕時，你可以刪除「擴展」類。
這是它應該是什麼樣子：
jQuery(document).ready(function($) {
$('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() {
$('.top-bar').removeClass('expanded');
});
}(jQuery));
的選擇「.TOP吧ul.right（或取決於你如何安排你的按鈕。左）禮」可以用一個id，如果也被稱爲你給你的菜單（ul元素）一個唯一的ID。在這種情況下，它將是：
jQuery(document).ready(function($) {
$('#myMenuId li').click(function() {
$('.top-bar').removeClass('expanded');
});
}(jQuery));
希望有所幫助。
嘗試：
$('#main-menu li').click(function() {
$('.toggle-topbar').trigger('click');
});
因爲我不明白的代碼，我不知道該把它放在哪裏，我嘗試了幾件事，但真的像在黑暗中拍攝的那樣。 – Wookieguy
一個更清潔的方式（而不是觸發點擊或刪除類）：
$(document).on("click", ".top-bar li", function() {
Foundation.libs.topbar.toggle($('.top-bar'));
});
這爲我工作，但爲了使其工作，並沒有打破右側的「菜單」按鈕（僅在小型/手機屏幕上），我需要針對導航欄中的不同元素 - 針對此元素爲我工作： '.on（「click」，「.top-bar-section li」...' – FireDragon
這對我來說是什麼在起作用：
setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
讓我知道，如果這也適用於你。 （也許將「500」減少到短於半秒的時間）。
下面是一個擴大版：
<script type="text/javascript">
function hideDropDown() {
setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
}
</script>
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a href="#">My menu</a>
<ul class="dropdown">
<li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li>
</ul>
</li>
</ul>
</section>
</nav>
我與基金會6的工作是第一次，我碰到這個崗位跑在試圖想出一個辦法來對關閉新的頂級酒吧菜單當點擊鏈接時移動。我想對我的解決方案發表評論，以防其他在Foundation 6上工作的人跑過這篇文章，因爲這對我來說是一個很好的起點。
這裏就是我所做的：
導航設置 - 在中型和大型斷點水平導航，響應切換垂直導航的小斷點
<!-- Mobile responsive toggle (hamburger menu) -->
<div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Nav items -->
<div id="siteNav" class="top-bar">
<p><ul class="vertical medium-horizontal menu text-center">
<li ><a href="#home" onClick="">HOME</a></li>
<li ><a href="#services">SERVICES</a></li>
<li ><a href="#contact">CONTACT</a></li>
</ul></p>
</div>
然後，我添加了jQuery的修改版本基礎上，在這篇文章中先前的解決方案（感謝amazingBastard和Cerbrus）：
$(document).ready(function($) {
$('#siteNav li').click(function() {
if(Foundation.MediaQuery.current == 'small'){
$('#siteNav').css('display', 'none');
}
});
});
在地基6上的CSS選擇「顯示」被添加到一個擴展菜單，並設置爲「顯示：無」隱藏或「顯示：塊」擴展。這個jquery代碼片段檢查當前斷點與我正在使用的默認菜單類中的導航項目點擊一個小的（移動設備），如果爲true，則將css選擇器更改爲「display：none」，從而有效關閉菜單切換。
我複製了Foundation 6下拉的關閉函數的代碼中的一些代碼。
爲了使它工作，我也不得不設置選項菜單元素數據禁用懸停=「真否則菜單不會關閉第一次用戶點擊它的元素。
我寫我的代碼在AngularJS並使其工作。我猜它是這樣的jQuery的。換句話說，代碼沒有進行測試。
$('#main-menu li').click(function closeDropdown() {
var $toClose = $('#main-menu');
if(!$toClose){
return;
}
var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;
if (somethingToClose) {
$toClose.find('li.is-active').add($toClose).attr({
'aria-expanded': false,
'data-is-click': false
}).removeClass('is-active');
$toClose.find('ul.js-dropdown-active').attr({
'aria-hidden': true
}).removeClass('js-dropdown-active');
}
});
這個工作很完美，適應了我的時髦的菜單設置。由於其他原因，我最近已經加入了jQuery，這是重新學習它的一個很好的藉口。謝謝。 – Wookieguy