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

Question

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

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

score 5 · Accepted Answer

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

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

score 1 · Accepted Answer

更清洁的方式：

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

score 1 · Accepted Answer

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

把这个放在标题上：

<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>
...

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

5 回答 5