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

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 classes 标记下拉列表中的项目。

• 下拉切换应如下所示：

  <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。