如何通过 jQuery 关闭 Foundation 中展开的移动顶部栏？

Posted 2023-02-16

【中文标题】如何通过 jQuery 关闭 Foundation 中展开的移动顶部栏？

【英文标题】：How to close expanded mobile top bar in Foundation via jQuery?

【发布时间】：2013-07-11 00:26:36

【问题描述】：

我想知道是否有办法在单击其中一项时关闭 Foundation 中展开的顶部栏？我想我正在寻找一些放在这个中心的东西：

$('#some-menu-item').click(function() 
    //some function to collapse the menu
);

【参考方案1】：

通过提升 Foundation 的 topbar.js 的第 174-176 行来解决这个问题。

$('#some-menu-item').click(function() 
    $('.top-bar, [data-topbar]').css('height', '').removeClass('expanded');
);

【讨论】：

太棒了！谢谢波洛克。为我节省了大量时间！

太棒了，这为我节省了大量时间。我确实希望#foundation 团队解决了这个问题，或者至少让它成为可选的。

【参考方案2】：

更清洁的方式：

$(document).on("click", ".top-bar li", function () 
     Foundation.libs.topbar.toggle($('.top-bar'));
 );

【参考方案3】：

对于同样的问题有我的快速解决方案：

把这个放在标题上：

<script type="text/javascript">
 /*Fix toggle menu*/
 function fixToggleMenu()
 
    Foundation.libs.topbar.toggle($('.top-bar'));
 
</script>

然后，在你的 href 中调用这个函数：

...
<li><a href="#services" onClick="fixToggleMenu();">Services</a></li>
...

【参考方案4】：

一种更清洁的方式（我认为）

$('#some-menu-item').click(function() 
    $('nav.top-bar').foundation('topbar', 'toggle');
);

【参考方案5】：

$("#some-menu-item").click(function()
    $(this).animate(height:10,200).attr('id', 'topbar');
  );

这应该可以解决您希望顶部栏接近的尺寸的高度值。

【讨论】：

这只是缩小了菜单项本身。