Bootstrap 移动菜单调整到桌面

Question

我为 HTML 页面构建了自定义移动菜单。这个移动菜单位于内容的底部并且是隐藏的，直到使用以下选择：-

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"  aria-expanded="false" id="mobile-navigation-toggle">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

这是在移动设备上与 Bootstrap 一起出现的标准汉堡包菜单图标。自定义移动菜单如下所示：-

<div id="menu" class="nav-collapse">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</div>

然后我有一个 JS 函数可以根据需要打开和关闭这个菜单，而且效果很好。

$("#mobile-navigation-toggle").click(function() {
var expanded = $(this).attr('aria-expanded');

if(expanded == "true") {
    $(this).attr('aria-expanded','false');
    $("#main").animate({marginLeft:'0px'},'slow');   
}
else {
    $(this).attr('aria-expanded','true');
    $("#main").animate({marginLeft:'500px'},'slow');   
} 
});

我在从移动设备调整大小时到桌面设备时遇到问题 - 我想要这个移动菜单（当时可能会或可能不会展开）滑动关闭并将主要内容滑回。移动菜单从左侧推入。

我写了这个，效果很好，但我觉得它可能很 hacky。

$(window).resize(function() {
    var width = $(window).width();
    console.log(width);

    <!-- Is there a better way of doing this? -->
    if(width >= 750) {
        $("#mobile-navigation-toggle").attr('aria-expanded','false');
        $("#main").animate({marginLeft:'0px'},'slow');  
    }
    <!-- End Is there a better way of doing this? -->
});

有没有比检查宽度为 750 并滑动关闭菜单更好的方法来测试 bootstrap desktop/mobile 菜单是否显示？

提前致谢！

Answer 1

您可以使用 @media query 来检测 window 宽度。

只需添加到您的 css:

#main {
   transition:all .3s ease;
}

@media screen and (min-width: 480px) {
   #main {
       margin:0 !important;
   }
}

此外，您需要将 $("#main").animate({marginLeft:'0px'},'slow'); 中的 animate 函数更改为 css - css transition 会处理动画。

请注意，您在旅游网站上有几个 #main。你应该解决这个问题。

Bootstrap 移动菜单调整到桌面

Bootstrap Mobile Menu Resizing to Desktop

html

css

jquery

window-resize

twitter-bootstrap