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');   
} 
});

我有一个问题，但是从手机到桌面重新调整大小时 - 我想要这个移动菜单（当时可能会扩展或不扩展），滑动关闭，主要内容可以滑回。移动菜单从左侧推进。

我写过这篇文章，效果很好，但我觉得这可能很糟糕。

$(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 Mobile菜单调整大小到桌面

0 个答案: