Question

我希望这个标题足以理解，我很难想象如何描述这个。

我的网站上有以下代码

Navbar Bootstrap

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    <div class="container">
        <section>
            <div class="navbar-header">
                <a href="/" class="navbar-brand"><img src="/images/logo.png" style="max-width:100px; margin-top: -10px;"></a>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/about/">About</a></li>
                    <li><a href="/faq/">FAQ</a></li>
                    <li><a href="/how-to/">How To</a></li>
                    <li><a href="/blog/">Blog</a></li>
                </ul>
                <div class="btn-toolbar">
                    <a href="/login/" class="btn btn-info navbar-btn navbar-right">Sign In</a>
                    <a href="/create/" class="btn btn-info navbar-btn navbar-right">Create Account</a>
                </div>
            </div>
        </section>
    </div>
</nav>

使用Javascript / jquery的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("form#loginForm").submit(function() {
    var churchcode = $('#churchcode').attr('value');
    var username = $('#username').attr('value');
    var password = $('#password').attr('value');
    var passwordagain = $('#passwordagain').attr('value');
        $.ajax({
            type: "POST",
            url: "/church/includes/create.php?",
            // WRONG WAY
            data: "churchcode="+ churchcode+
            "&username="+ username+
            "&password="+ password+
            "&passwordagain="+ passwordagain,
            // RIGHT WAY
            data:({churchcode: churchcode,username: username, password: password, passwordagain: passwordagain}),
            success: function(data) {
                $('div.alert').fadeIn();
                $('div.alert').html(data);
            }
        });
    return false;
    });
});
function hide(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'none';
}
</script>
</head>
<body> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>

我知道我在javascript中两次调用jquery CND <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>，但我这样做是为了向你们展示我试图放置这两行的两个地方。

无论出于何种原因，无论我放置<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>（顶部还是底部）的位置，都会打破下拉菜单，该菜单是在移动浏览器上查看网站时显示的<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">选项。以下是我所说的移动（响应）视图。当我点击菜单时，它不会拉下任何东西。

Navbar

如果我从页面中删除了jquery CDN调用，则下拉列表再次起作用。但是我当然需要jquery来工作。任何想法？

我已将此jquery CDN行放置在每个可能的位置，无论它打破了下拉引导程序。

Answer 1

我终于明白了，它是需要至少1.9.3版本的jquery以及一些旧的ajax代码的组合。

我从

切换

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

到

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

并从

更改

data: "churchcode="+ churchcode+
    "&username="+ username+
    "&password="+ password+
    "&passwordagain="+ passwordagain,

到

data:({churchcode: churchcode,username: username, password: password, passwordagain: passwordagain}),

并从

更改

var churchcode = $('#churchcode').attr('value');
var username = $('#username').attr('value');
var password = $('#password').attr('value');
var passwordagain = $('#passwordagain').attr('value');

到

var churchcode = $('#churchcode').val();
var username = $('#username').val();
var password = $('#password').val();
var passwordagain = $('#passwordagain').val();

它有效！

Answer 2

我建议您将jquery下载到您的服务器上，因为当出站连接速度很慢时，它不会滞后。

bootstrap - jquery CDN打破了navbar mobile pulldown

2 个答案: