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打破導航欄移動下拉

回答

相關問題