jquery - 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 桌面/移动菜单是否显示？

提前致谢!

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。你应该解决这个问题。