2015-05-01 5 views
1

Я получил этот код из одного из ответов здесь, в stackoverflow, но, похоже, он не работает на меня? Когда появляется кнопка меню, и я нажимаю ее, ничего не происходит, за исключением того, что она меняет цвет. Пожалуйста, помогите, вот код, который я использовал. СпасибоBootstrap Отзывчивое меню не работает

<header class="row"> 
    <div class="col-md-5"> 
     <a href="index.html"><img class="pull-left img-responsive" src="view/images/logo.png" alt=""></a> 
    </div> 
    <div class="col-md-7"> 
     <nav class="navbar navbar-default pull-right" role="navigation"> 


<div class="navbar-header"> 
    <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> 
</div> 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
<ul class="nav nav-pills head-menu"> 
    <input type="hidden" id="selected_menu_item" value="=$selectedMenuId; ?>" />        
    <li> 
     <a href="#" id="welcome"> 
     The Institution    
     </a> 
    </li> 
     <li><a href="#" id="kitchen">Our Offerings</a></li> 
     <li><a href="#" id="programma" >Events</a></li> 
     <li><a href="#" id="foodart" >Contact Us</a></li> 
</ul> 
</div> 

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script> 
//Stack menu when collapsed 
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function() { 
$('.nav-pills').addClass('nav-stacked'); 
}); 

//Unstack menu when not collapsed 
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function() { 
    $('.nav-pills').removeClass('nav-stacked'); 
}); 
</script> 

что могло не быть?

+0

Вы когда-нибудь решают эту проблему? У меня та же проблема. – Dave

+0

Да! Я отправлю его на ответы, чтобы вы могли понять код @Dave – Nnn

+0

Спасибо, мне кажется, мне просто нужен компонент Collaps js Bootstrap. Загрузили его на сайте настройки Bootstrap, и все начало работать. – Dave

ответ

1

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

<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
<title>GreatnessLab - Education for a Better World</title> 

<!-- Bootstrap --> 
<link href="view/css/bootstrap.min.css" rel="stylesheet"> 
<link href="view/css/styles.css" rel="stylesheet"> 
<link href="http://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet" type="text/css"> 
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script src="js/respond.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
Смежные вопросы