2

我通常使用 Ruby on rails 来开发我的工作，使用 sublime text 作为我的文本编辑器，但今天我只使用记事本并在本地创建一个站点。现在通常我所有的 js 和 css 都通过 rails 中的资产管道完美呈现，但我无法让 js 工作，特别是导航栏中的下拉按钮。

我在标题中调用 Jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

我正在调用我的 bootstrap.js 文件

<script src="js/bootstrap.js" type="text/javascript"></script>

导航栏的css如下

 <div class="container">
  <div class="navbar">
    <div class="navbar-inner">
     <div class="container">

  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>


  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse">
    <ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
  </div>

</div>

我是否因为按钮没有响应而遗漏了一些显而易见的东西？

任何帮助表示赞赏

4

2 回答 2

7

您是否包含了所需的 bootstrap.css 样式表？

 <link href="css/bootstrap.min.css" rel="stylesheet">

编辑1：

这是一个带有 HTML/bootstrap的jsBin 。如果您没有看到相同的输出，那么确实有问题。如果您希望在单击导航栏按钮之一时出现某种行为，那么这实际上并不是一个错误：导航栏的单击没有附加任何 js 行为。

Bootstrap 将为您提供一个“美化”的导航栏，它改变了美学而不是行为，您仍然需要连接到各个点击并为它们定义自己的行为。

编辑2：

要连接到点击，您必须获取菜单项并使用 jQuery 来定义点击行为。一个例子是为每个导航栏项目定义唯一的 id

<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>

然后使用 jQuery 的选择器检索它们并附加点击处理程序：

$("#home").click(function() {
  alert('home clicked');
});

$("#about").click(function() {
  alert('about clicked');
});

我已经编辑了 jsbin 来添加这个例子。

于 2012-08-22T12:37:53.653 回答
1

CDN 没有拉 jquery，所以我现在在本地托管了文件，它工作正常

于 2012-08-29T11:11:55.437 回答