Question

我通常使用Ruby on rails来开发我的工作，使用sublime文本作为我的文本编辑器，但今天我只使用记事本并在本地创建一个站点。现在通常我的所有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>

我错过了一些明显的东西，因为按钮没有响应？

任何帮助表示赞赏

Answer 1

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

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

修改1：

这是一个带有HTML / bootstrap的jsBin。如果你没有看到相同的输出，那么确实是错误的。如果您在其中一个导航按钮被点击时期望某些行为，那么它实际上并不是一个错误：导航栏的点击没有附加js行为。

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

编辑2：

要连接到您必须获取菜单项的点击，并使用jQuery来定义onclick行为。一个示例是为每个导航栏项定义唯一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来添加这个例子。

Answer 2

CDN没有拉动jquery所以我现在已经在本地托管该文件并且工作正常

Bootstrap JS和Navbar Button

2 个答案: