为什么我的下拉菜单表现奇怪？

Question

所以我正在创建一个带有导航栏的rails应用程序，位于页面顶部。但是，当我实现以下代码并单击“类别”时，名称不会显示。我还附上一张照片。

<ul class="nav navbar-nav navbar-right">

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle= "dropdown" role="button"
      aria-expanded="false">Categories <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <% Category.all.each do |category| %>
        <li class="<%= 'active' if params[:category] == category.name%>">
          <%= link_to category.name, attractions_path(category: category.name), class: "link"%>
        </li>
        <% end %>
      </ul>
    </li>

现在，当我将代码更改为以下内容时，我可以在下拉菜单中看到应显示的项目。我究竟做错了什么？为什么会这样？

<ul class="nav navbar-nav navbar-right">

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle= "dropdown" role="button"
      aria-expanded="false">Categories <span class="caret"></span></a>
      <ul class="dropdown-toggle" role="menu">
        <% Category.all.each do |category| %>
        <li class="<%= 'active' if params[:category] == category.name%>">
          <%= link_to category.name, attractions_path(category: category.name), class: "link"%>
        </li>
        <% end %>
      </ul>
    </li>

所以基本上我只是改变了这一行<ul class="dropdown-toggle" role="menu">。

为什么我的菜单没有显示所有类别？

Answer 1

您似乎正在尝试使用Bootstrap4设置的Bootstrap3导航栏。有一些更改，但您应该能够根据文档中的example重建它：

• nav中的项目应标有nav-item个类。

• 您不需要自己添加插入符号（<span class="caret">）。

• 您的下拉菜单中的项目现在需要用dropdown-item课程标记。

• 下拉切换应如下所示：

  <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="someId">
  

  而不是：

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

• 下拉菜单应与aria-labelledby="someId"的切换相关联。

将这些放在一起会给你这样的东西：

<ul class="nav navbar-nav navbar-right">
  <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="someId">
      Categories
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="someId">
      <% Category.all.each do |category| %>
        <li class="dropdown-item <%= 'active' if params[:category] == category.name %>">
          <%= link_to category.name, attractions_path(category: category.name), class: "link"%>
        </li>
      <% end %>
    </ul>
  </li>
  ...
</ul>

您当然希望使用合理的内容替换someId。