Фонд 6.2.4 отзывчивое меню, не работающее с 6.0.0 (идентичный код)

Question

Эта панель навигации работала, как и ожидалось, с Foundation 6.0.0. При изменении версии Foundation до 6.2.4 скрытая панель кнопок не появляется (и верхняя панель не исчезает) на маленьких экранах.

Вот скрипка версии 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" вместо «data-hide-for».

Я исследовал проблему, но не смог найти ссылку на изменение от предыдущей версии до этой версии. Это имеет большее значение, поскольку вы не хотите скрывать меню гамбургера с маленького экрана.