HTML/CSS bootstrap 的下拉框失效问题

runup · 2013年11月29日 · 最后由 Martin91 回复于 2013年11月30日 · 9662 次阅读

整个文件如下

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <%= link_to "CIMS知识共享平台", root_path, id: "logo" %>
      <nav>
        <ul class="nav pull-right">       
          <% if signed_in? %>

            <% if current_user.admin? %>
                <li><%= link_to "管理员", admin_path %></li>  
            <% end %>

            <li><%= link_to "用户圈", users_path %></li>
            <li><%= link_to "发布文章", articles_path %></li>

            <li id="fat-menu" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                账户 <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "资料显示", current_user %></li>
                <li><%= link_to "设置更新", edit_user_path(current_user) %></li>
                <li class="divider"></li>
                <li>
                  <%= link_to "退出", signout_path, method: "delete" %>
                </li>
              </ul>
            </li>

          <% else %>         
                <li><%= link_to "用户登陆", signin_path%></li>               
          <% end %>
        </ul>
      </nav>
    </div>
  </div>
</header>

使用 bootstrap 的下拉框,代码中下拉框部分是:

<li id="fat-menu" class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                账户 <b class="caret"></b>
              </a>
              <ul class="dropdown-menu">
                <li><%= link_to "资料显示", current_user %></li>
                <li><%= link_to "设置更新", edit_user_path(current_user) %></li>
                <li class="divider"></li>
                <li>
                  <%= link_to "退出", signout_path, method: "delete" %>
                </li>
              </ul>
            </li>

出现的问题是下拉框失效,但是同样的代码在 ruby on rails tutorial 中是可以实现的,向各位前辈请教?

有没有检查脚本错误啊??看一下是不是 js 执行错误,你的 js 文件加载顺序是怎样的?

如果是 Ruby on Rails 的话,多半是由于 turbolink 造成的,可以再 dropdown 上面加入data-no-turbolink="true"

参考链接: https://github.com/anjlab/bootstrap-rails/issues/70

#1 楼 @Martin91 问题解决了,我在 firefox 看了是因为触发没有实现,我重新在 asset 中增加了 bootstrap-dropdown.js 文件,就实现了这个功能,但是我在其他项目中没有增加这个 js 文件,也是能够实现了,不解。况且我添加的 gem bootstrap-sass 是内嵌这个 js 文件的。

#2 楼 @chunlea 我系统里面没有增加这个 turbolink 这个东西的,我是按照如上的方法解决的,但是我不知道其中的道理。

#4 楼 @runup 开发环境每个静态文件都是分开请求的,在浏览器调试看看有没有 link 进来。

#5 楼 @Rei 开发环境每个静态文件都是分开请求?小白不理解,前辈能不能帮忙解释下

#6 楼 @runup 开浏览器调试看看 <head> 的内容

#7 楼 @Rei 恩,我试试。谢谢前辈。

#3 楼 @runup 你在其他项目中是有 bootstrap.js 文件的吧?你在你现在这个项目里边是不是 js 加载顺序有错误啊

#9 楼 @Martin91 加载循序是怎么看的?其他的项目中的只有 bootstrap 这个 gem,但是没有添加 bootstrap.js 这个文件。

#10 楼 @runup js 文件肯定是在 gem 里边的。顺序的话你可以贴一下你的application.js文件。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号