下拉菜单在某些页面上不起作用，除非重新加载

Question

我有一个与某些js兼容的侧边栏。为了使其正常工作，我必须直接在侧边栏data-turbolinks="false"内禁用Turbolink 出于某些原因，我真的不明白为什么除非重新加载页面，否则无法打开某些页面上的下拉菜单...

例如，我在下面的页面上没有问题：

sales / index.html.erb

<div class="container">
    <div class="row">
        <div class="col-12">
            <% @sales.order('created_at DESC').each do |sale| %>
                <%= link_to admin_sale_path(sale) do  %>
                    <div class="small-cards">
                        <div class="row">
                            <div class="col-6">
                                <p><%= l(sale.created_at, format: '%d %B %Y' )%></p>
                            </div>
                            <div class="col-4">
                                <p>Articles: <%= sale.count_articles %></p>
                                <p>Total : <%= number_to_currency_euro sale.total %></p>
                            </div>
                            <div class="col-2">
                                <i class="fa fa-chevron-right"></i>
                            </div>
                        </div>      
                    </div>
                <% end %>
            <% end %>
        </div>
    </div>
</div>

但是我对此有疑问，我试图在容器中添加data-turbolinks="false"，但没有帮助。

categories / show.html.erb

<div class="container">
    <h1 class="primary_title"><%= @category.title.upcase %></h1>
    <hr>
    <div class="boxes">
        <div class="row">
            <% @category.products.each do |product| %>
                <div class="col-6 col-md-4 col-lg-3">
                    <%= link_to clients_category_product_path(@category, product) do  %>
                        <%= render "shared/cards", product: product %>
                    <% end %>
                </div>
            <% end %>
        </div>
    </div>
</div>

仅供参考：共享的部分包含一些引导轮播

_sidebar.html.erb

<div class="page-wrapper chiller-theme toggled" data-turbolinks="false">
    <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
      <i class="fas fa-bars"></i>
    </a>
    <nav id="sidebar" class="sidebar-wrapper">
      <div class="sidebar-content">
        <div class="sidebar-brand">
          <a href="#">Main menu</a>
          <div id="close-sidebar">
            <i class="fas fa-times"></i>
          </div>
        </div>
        <div class="sidebar-menu">
          <ul>
            <li class="sidebar-dropdown">
              <a href="#">
               <i class="fas fa-cart-arrow-down"></i>
                <span>Order</span>
                <% if Order.where(status: "paid").count >= 1 %> 
                  <span class="badge badge-pill badge-danger"><%= Order.where(status: "paid").count %></span>
                <% end %>
              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "Online sales", orders_path,  class: "list-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>      
            </li>

            <li class="sidebar-dropdown">
              <a href="#">
               <i class="fas fa-truck"></i>
                <span>Sales</span>
              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "Shop sales", sales_path,  class: "list-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>      
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

app / assets / javascripts / sidebar.js

jQuery(function ($) {

  $(".sidebar-dropdown > a").click(function() {
    $(".sidebar-submenu").slideUp(200);
    if (
      $(this)
        .parent()
        .hasClass("active")
    ) {
      $(".sidebar-dropdown").removeClass("active");
      $(this)
        .parent()
        .removeClass("active");
    } else {
      $(".sidebar-dropdown").removeClass("active");
      $(this)
        .next(".sidebar-submenu")
        .slideDown(200);
      $(this)
        .parent()
        .addClass("active");
    }
  });

  $("#close-sidebar").click(function() {
    $(".page-wrapper").removeClass("toggled");
  });

  $("#show-sidebar").click(function() {
    $(".page-wrapper").addClass("toggled");
  });

});