使用 ruby 代码输出在 bootstrap 按钮行内添加下拉菜单

Question

在我的 Rails 应用程序上，我有一个行按钮，我想将其中一个变成一个下拉菜单，该菜单将显示从数据库中提取的项目table，ruby 代码有效，但我无法将其显示为下拉菜单。

这里是 ruby 代码：

<% @all_makes.each do |allMakesDisplay| %>
  <a id="allMakesDisplay"><%= link_to allMakesDisplay.name, make_index_path(make_name: allMakesDisplay.name) %></a>
<% end %>

这是带有下拉列表的行：

<div class="collapse navbar-collapse top-bar" id="bs-example-navbar-collapse-1">
  <div class="row">
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="/">Home</a>
      </button>
    </div>
    <div class="col-md-3">
      <div class="dropdown">
        <button class="btn btn-lg btn-secondary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
          <a href="/dealership/category/make">Makes</a>
          <span class="caret"></span>
        </button>
        <% @all_makes.each do |allMakesDisplay| %>
          <ul class="dropdown-menu">
            <li>
              <a href="<%= link_to allMakesDisplay.name, dealership_category_make_path(allMakesDisplay) %>"></a>
            </li>
          </ul>
          <% end %>
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="blog.html">Models</a>
      </button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="contact.html">My Portfolio</a>
      </button>
    </div>
  </div>
</div>

MAKES 应该是下拉菜单，应该返回 12 个项目。

谢谢

Answer 1

发生了一些事情：

#each 循环应该在 <ul>.
link_to 将创建锚标记 <a>，因此不应将其用作 href 属性。 link_to

<div class="collapse navbar-collapse top-bar" id="bs-example-navbar-collapse-1">
  <div class="row">
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="/">Home</a>
      </button>
    </div>
    <div class="col-md-3">
      <div class="dropdown">
        <button class="btn btn-lg btn-secondary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
          <a href="/dealership/category/make">Makes</a>
          <span class="caret"></span>
        </button>
        
          <ul class="dropdown-menu">
            <!--for each element, create a <li> (not <ul>)-->
            <% @all_makes.each do |allMakesDisplay| %>
            <li>
              <%= link_to allMakesDisplay.name, 
                          dealership_category_make_path(allMakesDisplay) %>
            </li>
           <% end %> <!-- end #each loop-->
          </ul>
          
      </div>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="blog.html">Models</a>
      </button>
    </div>
    <div class="col-md-3">
      <button class="btn btn-lg btn-secondary btn-block">
        <a href="contact.html">My Portfolio</a>
      </button>
    </div>
  </div>
</div>

使用 ruby 代码输出在 bootstrap 按钮行内添加下拉菜单

Adding a drop down inside bootstrap buttons row with ruby code output

html

ruby

ruby-on-rails

erb