Question

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

当在画布外菜单上点击链接时，我也使用Twitter-Bootstrap打开模态窗口。

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

在导航栏上点击/选择链接（或按钮）时，有没有办法隐藏“画外”菜单？

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

时设置自动隐藏选项

类似的东西：

$（＆＃39; .navmenu＆＃39;）。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');
    ....
});

希望有所帮助！

隐藏Jasny OffCanvas导航

1 个答案:

在您创建offcanvas

手动触发offcanvas的隐藏事件