Javascript ZURB基础顶杆的手风琴行为未实现

我的网站要求移动设备的导航像手风琴一样。我在尝试执行此操作时遇到了麻烦，因为我似乎无法覆盖幻灯片菜单行为，这显然是默认行为

我的问题是：我是否应该（可以）使用第三方js来覆盖手机和平板电脑的顶部栏，同时保持当前桌面的顶部栏导航

我在桌面侧边栏中有手风琴菜单，但我似乎无法将这种风格应用于顶部栏

我希望我遗漏了一些明显的东西——如果我遗漏了，具体是什么

---

显然，我这样做是错误的。

我的建议是保留这两个菜单，这意味着在服务器端脚本中的加载时间，您可以设置一个条件，即如果它是移动的，而不是使用第三方移动菜单，否则您已经有了顶栏。

这里是一个演示，带有注释和说明。它重新使用了大部分Foundation的.top bar类和功能，但使用自定义jQuery而不是TopBar JS，以实现手风琴效果

HTML修改

下面的代码示例摘自基金会的TopBar文档。进行html注释中描述的更改，以将.top栏转换为手风琴动画样式

<!-- IMPORTANT: remove the "data-topbar" attribute from .top-bar, 
otherwise the topbar plugin will initialize. -->
<nav class="top-bar" data-topbar role="navigation">

...

<!-- IMPORTANT: remove the .dropdown class from the dropdown menu -->
<ul class="dropdown">

JS Init

不幸的是，动画无法在桌面屏幕大小下工作，因为！基金会CSS中的重要标志，如下所示：

@media only screen and (min-width: 40.063em) {
    .top-bar-section ul { height: auto !important; } 
}

要使手风琴动画在大屏幕上工作，您需要删除该样式声明或重写.top-bar部分类，这将是相当多的工作。在示例实现中，菜单在单击并悬停时起作用，除非您在小屏幕上，否则它不会设置动画

// Init foundation as usual
$(document).foundation();

/* Register event handlers for .top-bar accordion menu */
// This opens the menu
$('.top-bar').on('click', '.toggle-topbar', function(e) {
    e.preventDefault();
    $('.top-bar').toggleClass('opened');
});

// This does the accordion animation
$('.top-bar-section').on('click', '.has-dropdown > a', function(e){
    e.preventDefault();
    $('.top-bar-section ul ul').slideUp();
    $(e.target).next().not(':visible').slideDown();
});

---

来源：

请发一篇文章。虽然这个链接可以回答问题，但最好在这里包含答案的基本部分，并提供链接供参考。如果链接页面更改，仅链接的答案可能会无效。这是@greg-449吗？

// Init foundation as usual
$(document).foundation();

/* Register event handlers for .top-bar accordion menu */
// This opens the menu
$('.top-bar').on('click', '.toggle-topbar', function(e) {
    e.preventDefault();
    $('.top-bar').toggleClass('opened');
});

// This does the accordion animation
$('.top-bar-section').on('click', '.has-dropdown > a', function(e){
    e.preventDefault();
    $('.top-bar-section ul ul').slideUp();
    $(e.target).next().not(':visible').slideDown();
});