隐藏灯光 OffCanvas 导航

Question

我正在尝试将 Jasny 用于某些 Off-Canvas 菜单组件。

我也在使用 Twitter-Bootstrap 打开模式 window 当在关闭的 canvas 菜单上单击 link 时。

我遇到的问题是关闭-canvas 菜单（在移动视图中）将 bootstrap 模态向右推，因此，我无法看到其中的所有元素模态 window.

当 link（或按钮）已经 clicked/selected 在导航栏上时，有没有办法隐藏 Off-Canvas 菜单？

一些 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>

Answer 1

看看 Jasny documentation 有几个选项：

创建 offcanvas 时设置自动隐藏选项

类似于：

$('.navmenu').offcanvas({ autohide: true });

手动触发offcanvas的隐藏事件

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

类似于：

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

希望对您有所帮助！

隐藏灯光 OffCanvas 导航

Hide Jasny OffCanvas Navigation

css

twitter-bootstrap

modal-dialog

jasny-bootstrap

创建 offcanvas 时设置自动隐藏选项

手动触发offcanvas的隐藏事件