Question

我从stackoverflow中的一个答案中得到了这段代码，但它似乎不适用于我？当菜单按钮出现时我点击它没有任何反应，除了它改变颜色。请在这里帮助我使用的代码。谢谢

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

可能缺少什么？

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

Bootstrap响应菜单无效

1 个答案: