0

我最近在 www.wrapboostrap.com 购买了一个 twitter 引导模板，然后我只是将 css 文件添加到 assets/stylesheets 并对 javascripts 执行相同操作，还将每个 css 文件中的 de route 更改为 assets/images 以获取一些 css 内容，但是当我将导航栏标记放在 layout.html.erb 上时，导航栏会显示所有选项列表，而无需单击它。（参见图片）我还在 application.js 文件中添加了行 //= 需要引导程序。

在此处输入图像描述

这是我的标记

应用程序.html.erb

    <!DOCTYPE html>
<html>
<head>
  <title>Mymaps</title>  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application"%>
  <%= stylesheet_link_tag 'gmaps4rails' %>
  <%= csrf_meta_tags %>
</head>

<body>   
  <div class="container">
    <%= render :partial => 'layouts/navbar' %>
    <%= yield %>
    <%= yield :scripts %>   
  </div>
</body>
</html>

_navbar.html.erb

<!--top menu-->
<section id="top-menu">
  <div class="container">
    <div class="row">
    </div>
  </div>
</section>

<!--header-->
<header id="header">
  <div class="container">
    <div class="row header-top">
      <div class="span5 logo">
        <a class="logo-img" href="#"><img src="assets/logo.png" alt="Tabulate"></a>
        <p class="tagline">Responsive Website Template</p>
      </div>
      <div class="span7 social-container" >
        <p class="phone hidden-phone"><i class="icon-envelope"></i> info@mywebsite.com</p><p class="phone hidden-phone"><i class="icon-bell"></i> Call Us +1 800 123 45 67</p>
        <div class="top-social">
          <a data-original-title="Facebook" rel="tooltip" data-placement="top" class="facebook"
          href="#"></a>

          <a data-original-title="Twitter" rel="tooltip" data-placement="top" class="twitter2"
          href="#"></a>

          <a data-original-title="Dribble" rel="tooltip" data-placement="top" class="dribbble"
          href="#"></a>

          <a data-original-title="Digg" rel="tooltip" data-placement="top" class="digg"
          href="#"></a>

          <a data-original-title="DeviantArt" rel="tooltip" data-placement="top" class="dart"
          href="#"></a>

          <a data-original-title="Market" rel="tooltip" data-placement="top" class="market"
          href="#"></a>
        </div>
      </div>
    </div>
    <div class="row header-nav">
     <div class="span12">
      <nav id="menu" class="clearfix">
        <ul>
          <li class="current"><a href="./index.html" ><span class="name">Home</span></a>
            <ul>
              <li><a href="./index.html">Home Page 1</a></li>
              <li><a href="./index2.html">Home Page 2</a></li>
              <li><a href="./index3.html">Home Page 3</a></li>
            </ul>
          </li>
          <li><a href="./about.html"><span class="name">Features</span></a>
            <ul>
              <li><a href="./about.html">About Us</a></li>
              <li><a href="./full-width.html">Full Width</a></li>
              <li><a href="./bs-scaffolding.html">BootStrap Pages</a>
                <ul>
                  <li><a href="./bs-scaffolding.html">Scaffolding</a></li>
                  <li><a href="./bs-base-css.html">Base CSS</a></li>
                  <li><a href="./bs-components.html">Components</a></li>
                  <li><a href="./bs-javascript.html">JavaScript</a></li>
                </ul>
              </li>
              <li><a href="./font-awesome.html">FontAwesome</a></li>
              <li><a href="./price-table.html">Price Table</a></li>
              <li class="last"><a href="./404.html">404 Page not found</a></li>
            </ul>
          </li>
          <li><a href="./portfolio4.html"><span class="name">Portfolio</span></a>
            <ul>
              <li><a href="./portfolio2.html">Portfolio 2 col</a>
                <ul>
                  <li><a href="./portfolio2.html">Portfolio 2 Columns</a></li>
                  <li class="last"><a href="./portfolio2ex.html">Portfolio 2 Columns Extended</a></li>
                </ul>
              </li>
              <li><a href="./portfolio3.html">Portfolio 3 col</a>
                <ul>
                  <li><a href="./portfolio3.html">Portfolio 3 Columns</a></li>
                  <li class="last"><a href="./portfolio3ex.html">Portfolio 3 Columns Extended</a></li>
                </ul>
              </li>
              <li><a href="./portfolio4.html">Portfolio 4 col</a>
                <ul>
                  <li><a href="./portfolio4.html">Portfolio 4 Columns</a></li>
                  <li class="last"><a href="./portfolio4ex.html">Portfolio 4 Columns Extended</a></li>
                </ul>
              </li>
              <li class="last"><a href="./portfolio-single.html">Single Portfolio</a></li>
            </ul>
          </li>
          <li><a href="./blog-sidebar-right.html"><span class="name">Blogs</span></a>
            <ul>
              <li><a href="./blog-sidebar-right.html">Blog - Sidebar Right</a></li>
              <li><a href="./blog-sidebar-left.html">Blog - Sidebar Left</a></li>
              <li><a href="./blog-type-1.html">Blog Type 1</a></li>
              <li><a href="./blog-type-2.html">Blog Type 2</a></li>
              <li class="last"><a href="./blog-single.html">Blog Single</a></li>
            </ul>
          </li>
          <li><a href="./contact.html"><span class="name">Contacts</span></a></li>
        </ul>
      </nav>
      <!--<form class="top-search pull-right">-->
      <!--<input type="text" placeholder="text here..." class="span3">-->
      <!--<button type="button" class="btn"><i class="icon-search-form"></i></button>-->
      <!--</form>-->
    </div>
  </div>
</div>
</header>

宝石文件 

source 'https://rubygems.org'

gem 'rails', '3.2.13'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'
gem 'gmaps4rails'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'

# To use Jbuilder templates for JSON
# gem 'jbuilder'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano'

# To use debugger
# gem 'debugger'

JS 主祭

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
4

1 回答 1

0

嗨，我只是找出我的问题，首先我只是将所有 javascritps 和 css 移动到 vendor/Javascripts 和 vendor/stylesheets ，然后在 application.js 和 application.css 清单中添加这些条目。做了很多调查我发现 jquery.min.js 必须首先加载，所以看起来 jquery.min.js 没有先加载，所以我只是在我的 application.js mainfest 上添加了一个新条目还有维奥拉！！！所有 jquery 动画都开始工作了！

因此，如果您使用 wrapbootstrap 主题，我建议始终确保首先加载 jquery.min.js。为此，只需在 application.js 清单中添加下一行

//= require jquery
//= require jquery_ujs 
//= require_self

//= require  ../../../vendor/assets/javascripts/jquery.min.js
//= require_tree ../../../vendor/assets/javascripts
于 2013-09-06T13:54:56.947 回答