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

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。