Question

使用Foundation，我试图制作一个响应菜单，该菜单从基本视图切换到下拉视图，反之亦然，具体取决于媒体大小（移动设备或台式机）。它在Foundation中受支持还是应该由我自己实施？

我编写了一个Jquery代码，根据媒体大小将菜单内容从一个位置移动到另一个位置。

HTML代码：

<ul class="dropdown menu" id="desktop-place" data-dropdown-menu>
    <li class="show-for-small-only">
        <a>Drop</a>
        <ul class="menu" id="mobile-place">
        </ul>
    </li>
    <li class="content"><a>One</a></li>
    <li class="content"><a>Two</a></li>
    <li class="content"><a>Three</a></li>
    <li class="content"><a>Four</a></li>
</ul>

JS代码：

$(document).foundation();

function moveFromBasicToDropdown() {
    $('#mobile-place').append($('.content'));
}
function moveFromDropdownToBasic() {
    $('#desktop-place').append($('.content'));
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
    if (newSize === 'small') {
        moveFromBasicToDropdown();
    }
    else {
        moveFromDropdownToBasic();
    }
});

if (Foundation.MediaQuery.is('small only')) {
    moveFromBasicToDropdown();
}
else {
    moveFromDropdownToBasic();
}

该代码按预期工作。但是，我不确定Foundation是否已支持此功能。如果没有，那么我想知道这是否是实现它的正确方法？

基础：如何在“基本菜单”和“下拉菜单”之间进行响应切换？

0 个答案: