jquery - Bootstrap 下拉菜单在手机上使用时不起作用

Question

我在导航栏上有一个登录按钮，它可以正常工作，但是当我尝试调整窗口大小时，我无法再打开登录栏。

我已经附上了，所以请告诉我为什么当我调整窗口大小时它不起作用并且无法打开登录。

但这是我的导航条码。

<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            </button> <a class="navbar-brand" href="index.html"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- <ul class="nav navbar-nav">
                    <li>
                        <a href="index.html">Money exchange</a>
                    </li>
                    <li>
                        <a href="about.html">Admin</a>
                    </li>                       
                </ul> -->
            <!-- <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            </ul> -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span style="margin-right:5px;" class="glyphicon glyphicon-log-in"></span>Login <span class="caret"></span></a>
                    <ul id="login-dp" class="dropdown-menu">
                        <li>
                            <div class="row">
                                <div class="col-md-12">Login via
                                    <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
 <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>

                                    </div>or
                                    <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                        <div class="form-group">
                                            <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="sr-only" for="exampleInputPassword2">Password</label>
                                            <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                            <div class="help-block "><a href="" style="color:grey;">Forget the password ?</a>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                        </div>
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox">keep me logged-in</label>
                                        </div>
                                    </form>
                                </div>
                                <div class="bottom text-center">New here ? <a href="#" style="color:grey;"><b>Join Us</b></a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

Answer 1

问题代码没有问题

Fiddle with only code posted in question

您在 Dropbox 中附加的代码，有一个文件名 creative.js 您有一个响应时关闭菜单的点击功能

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function () {
    $('.navbar-toggle:visible').click();
});

导致问题

Fiddle with problem

如果你删除代码，就不会有问题，响应式菜单会正常工作。

Fiddle