bootstrap - jquery CDN打破导航栏移动下拉

我希望标题足够好理解，我很难自己想如何描述这一点。bootstrap - jquery CDN打破导航栏移动下拉

我有下面的代码在我的网站

导航栏引导

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

我知道，我打电话jQuery的CND <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>两次在我的JavaScript，但我做到了这一点向你们展示这两个地方我正在尝试放置该线。

无论出于何种原因，无论我放置<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行放在每个可能的位置，不管它打破了pulldown bootstrap。

来源

2015-03-31 Cesar Bielich

在我看来，你包括jQuery两次（一次在你的代码片段开始，一次在最后）。 – 2015-03-31 01:28:33

我说过，在我的文章中，这是我放置这两条线的两个例子。 – 2015-03-31 01:29:56

我的错误 - 虽然令人困惑的例子... – 2015-03-31 01:30:39

我终于明白了，它至少需要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();

和它的作品！

来源

2015-03-31 02:26:40

-2

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

来源

2015-03-31 04:09:40 Wilf

bootstrap - jquery CDN打破导航栏移动下拉

回答

相关问题