html - rails 4 : link_to broken in Bootstrap context

标签 html css ruby-on-rails twitter-bootstrap

所以我正在关注 Twitter Bootstrap 文档并尝试实现一个简单的下拉菜单 <a>链接到我的 .navbar 中的一些额外属性(参见 http://getbootstrap.com/components/#navbar-default)

文档中的一行是:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>

我在 Rails 中将其翻译为:

 =link_to who_we_are_path, class:'dropdown-toggle', role:'button', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do
      Who We Are
      %span.caret

生成以下 HTML:

<a aria-expanded="false" class="dropdown=toggle" data-toggle="dropdown" href="/who_we_are" role"button">
"Who We Are"
 <span class="caret"></span>
 </a>

这看起来完全有效。但是,当我单击文本 "Who We Are" 时在 DOM 中,它实际上并没有转到 /who_we_are路径,但是当我将鼠标悬停在我在浏览器左下角看到的文本上时,我看到了 0.0.0.0:3000/who_we_are .

最佳答案

那是因为,下拉菜单的作用是加载菜单项,Bootstrap 阻止下拉菜单的默认值并显示菜单。您应该在菜单中添加您的链接,否则您必须覆盖 Bootstraps 默认值。 见http://getbootstrap.com/components/#dropdowns

试试这个

%div.dropdown
  =link_to "#", class:'dropdown-toggle', role:'button', 'aria-expanded' =>'false', data:{toggle: 'dropdown'} do
      Load Menu
      %span.caret
  %ul.dropdown-menu{role:"menu"}
    %li=link_to "Who We Are", who_we_are_path

关于html - rails 4 : link_to broken in Bootstrap context,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28052614/

相关文章:

php - 在检查元素中显示 0*0 像素的图像

javascript - 在提交事件上调用 jQuery 重新加载页面

html - Gmail 中未显示 Base64 编码图像

javascript - 如何在数据生命引擎中显示某些类别的div?

javascript - 如何阻止用户从浏览器控制台更改脚本

ruby-on-rails - 仅显示 Rails 中字符串的前 x 个单词

c# - 将 ASP.Net 表单数据发布到另一个页面

JQuery 背景位置语法

ruby-on-rails - rails 不见了

ruby-on-rails - 如何用 ActiveSupport::LoggerSilence 替换 LoggerSilence?