Rails - Display menu when its main category is clicked - ruby-on-rails

Question

I have a navbar where I display the MainCategory (Men, Women, Neutral)
(MainCategory is a model that have only one attribute :gender.)
I've definied the different genders like so:
enum gender: [:men, :women, :neutral]in my model.
Expected:
When I hover the link "Men" I want that the sub menu of "Men" shows up , same for "Women" and "Neutral".
Category is another model which has attributes :gender and a :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>
This the js file that show and hide the #category div.
$(document).on('turbolinks:load', function() {
$(".gender").mouseenter(function(){
$("#categories").slideDown();
})
$("body").click(function() {
$("#categories").slideUp();
});
$("#categories").click(function(e) {
e.stopPropagation();
});
});
With this code, I see the same submenu if I hover men or women, or neutral...
How should I improve this to have what expected?

Answer 1

You'll need to specify the related gender for each div and open it from your 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();
});
});
I can't test it, but this should work