Question

此导航栏与Foundation 6.0.0一起正常工作。将Foundation版本更改为6.2.4时，隐藏的按钮栏不会出现在小屏幕上（顶栏也不会消失）。

这是一个正在运行的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的相同代码的小提琴（响应性不起作用）。

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"代替＆＃39; data-hide-for＆＃39;。

我研究了这个问题，但是无法找到对从旧版本到此版本的更改的任何引用。这确实更有意义，因为你不想在小屏幕视图中隐藏汉堡包菜单。

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

2 个答案: