Адаптивное меню Foundation 6.2.4 не работает так, как в 6.0.0 (идентичный код)

Эта панель навигации работала, как и ожидалось, в 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/

Любая помощь в определении проблемы будет принята с благодарностью.


javascript html jquery zurb-foundation zurb-foundation-6
person Castle Applications Group    schedule 26.10.2016    source источник
comment
Вы просите людей сделать очень много, чтобы помочь понять, что не так. Как насчет настройки jsfiddle, чтобы показать проблему   -  person dstarh    schedule 26.10.2016
comment
Я поместил ваш код скрипки в codepen, и он не работает там с настройкой более низких версий. codepen.io/chris0/pen/dpLJNL   -  person Chris O    schedule 26.10.2016
comment
@ChrisO - вы включили 4 внешних ресурса - JS и CSS?   -  person Castle Applications Group    schedule 27.10.2016
comment
@CastleApplicationsGroup, вам нужно будет отметить этот вопрос, чтобы модератор снова открыл его.   -  person Chris O    schedule 31.10.2016
comment
@ChrisO, спасибо за ваши правки.   -  person Castle Applications Group    schedule 03.11.2016

Ответы (2)


arrow_upward
0
arrow_downward

Кажется, изменение на 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/

person gotohales    schedule 03.11.2016

arrow_upward
0
arrow_downward 

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

Не работает в версии 6.2.4, вместо этого используйте data-hide-for="medium"

Кроме того, вы можете использовать class="title-bar hide-for-small" вместо «скрытия данных».

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

person Chris O    schedule 03.11.2016