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 并滑动菜单更好的方法来测试引导桌面/移动菜单是否正在显示？

提前致谢！

Answer 1

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

只需添加到您的 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。你应该解决这个问题。