Foundation 6.2.4 响应式菜单无法像 6.0.0 那样工作（相同代码）

Question

此导航栏在 Foundation 6.0.0 中按预期工作。将Foundation版本更改为6.2.4时，小屏幕上隐藏按钮栏不出现（顶栏也不消失）

这是正在运行的 fiddle Foundation 6.0.0 版本。 JSFiddle：https://jsfiddle.net/frur5y41/

<div class="title-bar" data-responsive-toggle="realEstateMenu" data-hide-for="small">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="realEstateMenu">
    <div class="top-bar-left">
        <ul class="menu" data-responsive-menu="accordion">
            <li class="menu-text">Interplanetary</li>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
</div>    
<script>
    $(document).foundation();
</script>

这是使用 Foundation 6.2.4 的相同代码的 fiddle（响应能力不工作）。

JSFiddle：https://jsfiddle.net/g56gn37w/

如果能帮助确定问题，我们将不胜感激。

Answer 1

似乎更改为 data-hide-for="medium" 可以解决问题。

所以整个代码块将是：

<div class="title-bar" data-responsive-toggle="realEstateMenu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="realEstateMenu">
    <div class="top-bar-left">
        <ul class="menu" data-responsive-menu="accordion">
            <li class="menu-text">Interplanetary</li>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
</div>    
<script>
    $(document).foundation();
</script>

JSFiddle 在这里：https://jsfiddle.net/2dexkkj1/1/

Answer 2

`data-hide-for="small"` worked in version 6.0.0

它在 6.2.4 版本中不起作用，而是使用 data-hide-for="medium"

此外，您可以使用 class="title-bar hide-for-small" 代替 'data-hide-for'。

我研究了这个问题，但找不到任何关于从以前版本到这个版本的更改的参考。这确实更有意义，因为您不想在小屏幕视图中隐藏汉堡菜单。

Foundation 6.2.4 响应式菜单无法像 6.0.0 那样工作（相同代码）

Foundation 6.2.4 responsive menu not working as it did with 6.0.0 (identical code)

html

javascript

jquery

zurb-foundation

zurb-foundation-6