bootstrap - jquery CDN breaks navbar mobile pulldown

Надеюсь, что заголовок достаточно хорош, чтобы понять, мне было трудно подумать, как это описать.bootstrap - jquery CDN breaks navbar mobile pulldown

У меня есть следующий код на моем сайте

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>

Я знаю, что я называю 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 для работы. Есть идеи?

Я разместил эту линию CDN jquery во всех возможных местах и независимо от того, что она сломает загрузочный бутстрап.

источник

2015-03-31 Cesar Bielich

Выглядит так, как будто вы включаете jQuery дважды (один раз в начале вашего фрагмента и один раз в конце). –

Я сказал, что в моем посте это был пример двух мест, которые я помещаю в линию. –

Моя ошибка - запутанный пример, хотя ... –

Я, наконец, получил его, это была комбинация необходимости как минимум 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 breaks navbar mobile pulldown

ответ

Смежные вопросы