Css 隐藏画布导航

我试图使用Jasny作为一些非画布菜单组件

我还使用Twitter引导在点击画布外菜单上的链接时打开一个模式窗口

我遇到的问题是，非画布菜单（在移动视图上）将引导模式推到右侧，因此，我无法看到模式窗口中的所有元素

当在导航栏上单击/选择链接（或按钮）时，是否有方法隐藏非画布菜单

一些HTML代码片段：

<div class="navbar navbar-fixed-top navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand pull-right" href="#">
            <img class="img-responsive" src="assets/img/logo.png" alt="Alternate Text for Image" >
        </a>
    </div>

    <div class="navbar-offcanvas offcanvas navmenu-fixed-left">
        <a class="navmenu-brand" href="#">My Application</a>
        <ul class="nav nav-justified">
            <li>
                <a href="#"><span class="fa fa-search fa-lg"></span></a>
            </li>
            <li><a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static" >Sign Up</a></li>
            <li><a href="#" data-toggle="modal" data-target="#modalLogin" data-backdrop="static">Sign In</a></li>
        </ul>
    </div>
</div>

以及模态HTML：

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Login or <a href="#" data-toggle="modal" data-target="#modalSignup" data-backdrop="static" data-dismiss="modal">Sign Up</a></h4>
            </div>

            <div class="modal-body">
                <form class="form-signin">
                    <label for="inputUserName" class="sr-only">Username</label>
                    <input type="email" id="inputUserName" class="form-control" placeholder="Username" required autofocus>
                    <label for="inputPassword" class="sr-only">Password</label>
                    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                </form>
            </div>

            <div class="modal-footer">
                <label>
                    <input type="checkbox" value="remember-me"> Remember me
                </label>
                <button type="button" class="btn btn-primary">Sign In</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

&时代；
登录或
用户名
密码
记得我吗
登录
取消

只需查看以下选项：

在创建offcanvas时设置“自动隐藏”选项 比如：

$(".navbar button").click(function(){
    // Close offcanvas nav
    // offcanvas_selector is any valid css selector to get your offcanvas element
    $(offcanvas_selector)..offcanvas('hide');
    ....
});

$（'.navmenu'）.offcanvas（{autohide:true}）

手动触发offcanvas的隐藏事件 您可以在导航栏中为按钮/链接设置单击事件，并在处理程序中手动触发offcanvas close方法

比如：

$(".navbar button").click(function(){
    // Close offcanvas nav
    // offcanvas_selector is any valid css selector to get your offcanvas element
    $(offcanvas_selector)..offcanvas('hide');
    ....
});

希望有帮助

只需查看以下选项：

在创建offcanvas时设置“自动隐藏”选项 比如：

$(".navbar button").click(function(){
    // Close offcanvas nav
    // offcanvas_selector is any valid css selector to get your offcanvas element
    $(offcanvas_selector)..offcanvas('hide');
    ....
});

$（'.navmenu'）.offcanvas（{autohide:true}）

手动触发offcanvas的隐藏事件 您可以在导航栏中为按钮/链接设置单击事件，并在处理程序中手动触发offcanvas close方法

比如：

$(".navbar button").click(function(){
    // Close offcanvas nav
    // offcanvas_selector is any valid css selector to get your offcanvas element
    $(offcanvas_selector)..offcanvas('hide');
    ....
});

希望有帮助