Question

我有一个导航栏，其中显示 MainCategory （男性，女性，中性）（ MainCategory 是只有一个属性:gender的模型。）

我已经这样定义了不同的性别：

enum gender: [:men, :women, :neutral]在我的模型中。

预期： 当我悬停链接“ Men”时，我希望显示“ Men”的子菜单，与“ Women”和“ Neutral”相同。

类别是另一个具有属性:gender和:title

的模型

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
          <% MainCategory.order('gender ASC').all.each do |main_cat| %>
            <li class="nav-link gender"><%= main_cat.gender %> 
              <div id="categories">
                <ul class="navbar-nav mx-auto">
                   <% Category.where(gender: main_cat.gender).order('title ASC').each do |cat| %>
                     <% if cat.product_with_stock %>
                        <li class="nav-link"><%= link_to  "#{cat.title} ", clients_category_path(cat), class: "nav-link" %></li>  
                     <% end %>
                   <% end %>
                </ul>
              </div>
            <% end %>
          </li>
        </ul>
      </div>
    </nav>

这是显示和隐藏#category div的js文件。

$(document).on('turbolinks:load', function() {
    $(".gender").mouseenter(function(){
      $("#categories").slideDown();
    })

    $("body").click(function() {
      $("#categories").slideUp();
    });

    $("#categories").click(function(e) {
      e.stopPropagation();
    });
});

使用此代码，如果我将鼠标悬停在男人或女人或中立的地方，我会看到相同的子菜单...

我应该如何改善它以达到预期的效果？

Answer 1

您需要为每个div指定相关性别，然后从JS中打开它：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto">
          <% MainCategory.order('gender ASC').all.each do |main_cat| %>
            <li class="nav-link gender" data-gender="<%= main_cat.gender %>"><%= main_cat.gender %> 
              <div class="categories" data-gender="<%= main_cat.gender %>">
                <ul class="navbar-nav mx-auto">
                   <% Category.where(gender: main_cat.gender).order('title ASC').each do |cat| %>
                     <% if cat.product_with_stock %>
                        <li class="nav-link"><%= link_to  "#{cat.title} ", clients_category_path(cat), class: "nav-link" %></li>  
                     <% end %>
                   <% end %>
                </ul>
              </div>
            <% end %>
          </li>
        </ul>
      </div>
    </nav>

JS：

$(document).on('turbolinks:load', function() {
  $(".gender").mouseenter(function(){
    var gender = $(this).data("gender")
    $(".categories[data-gender=" + gender + "]").slideDown();
  })

  $("body").click(function() {
    $(".categories").each(function() { $(this).slideUp() })
  });

  $(".categories").click(function(e) {
    e.stopPropagation();
  });
});

我无法对其进行测试，但这应该可以

Rails-单击其主要类别时显示菜单

1 个答案: