Блог

У меня есть панель навигации, где я отображаю основную категорию (Мужчины, женщины, Нейтральные) (основная категория — это модель, у которой есть только один атрибут :gender .)

Я определил разные полы следующим образом:

enum gender: [: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>
  

Это js-файл, который показывает и скрывает #category div.

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

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

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

С помощью этого кода я вижу то же самое подменю, если я наведу указатель мыши на мужчин или женщин, или нейтральный…

Как я должен улучшить это, чтобы получить то, что ожидалось?

Вам нужно будет указать соответствующий пол для каждого 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();
  });
});
  

Я не могу это протестировать, но это должно сработать