Rails 5.2 - Подменю не остаются открытыми (Turbolink?)

Question

У меня есть эта боковая панель, и у меня возникают проблемы с открытием подменю.

Когда я нажимаю на sidebar-dropdown, он открывается и закрывается немедленно.Чем больше я нажимаю, тем меньше он открывается, а потом больше не открывается.Если я не перезагружаюсь ...

Я пытался отключить Turbolink в этом меню, добавив data-turbolinks="false" в html.Это частично работает, но это подразумевает другие проблемы.Раскрывающиеся боковые панели открываются и закрываются, как и ожидалось, и по какой-то причине я не могу объяснить после некоторого щелчка в главной навигационной панели они становятся неактивными, пока я не перезагружаю страницу ...

A # появляется взавершить URL при сбое clcik .. примерно так: http://localhost:3000//categories/66# (это происходит при включении или отключении turbolink "

В консоли браузера вообще нет ошибок.

В Моем приложенииЯ также использую gem 'webpacker', '~> 3.5.5'

Любое представление о том, что может быть не так? В каком направлении это исправить?

  <div class="page-wrapper chiller-theme toggled"> <!--data-turbolinks="false" is added in the div when turbolink is disabled -->
    <nav id="sidebar" class="sidebar-wrapper">
      <div class="sidebar-content">
        <div class="sidebar-brand">
          <a href="#">Menu pro</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>Orders</span>

              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "Orders", orders_path,  class: "list-item" %>
                    <%= link_to "New Orders", incoming_orders_path,  class: "list-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>      
            </li>

            <li class="sidebar-dropdown">
              <a href="#">
               <i class="fas fa-truck"></i>
                <span>Market</span>
              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "Markets", market_path,  class: "list-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>      
            </li>
            <li class="sidebar-dropdown">
              <a href="#" id="suppliers">
                <i class="fas fa-address-book"></i>
                <span>Suppliers</span>
              </a>
              <div class="sidebar-submenu">
                <ul>
                  <li>
                    <%= link_to "New Suppliers", new_supplier_path,  class: "drop-item" %>
                  </li>
                  <li>
                    <%= link_to "Suppliers", suppliers_path,  class: "drop-item" %>
                  </li>
                </ul>
              </div>
            </li>
            <li>
            <li>
               <%= link_to  clients_customization_path, class: "list-item" do %>
               <i class="fa fa-palette"></i> Customisation
               <% end %>
            </li>
          </ul>
        </div>
        <!-- sidebar-menu  -->
      </div>
    </nav>
  </div>

и это файл js:

// the below turbolink:load is commented when turbolink is disabled
$(document).on('turbolinks:load', function() {
  // The below commented jQuery line is commented when turbolink is disabled and uncommented when trubolink is enabled
  // 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");
    });
  // });
});

ОБНОВЛЕНИЕ> Я выяснил, что в случае, если турболинк отключен, выпадающие боковые панели становятся неактивными после того, как я захожу на страницу показа (любые страницы показа вызывают сбой боковой панели) На моей странице показа я использую турболинк для начальной загрузки.

Так что дело в том, чтобы найти КАК я могу заставить работать турболинк корректно везде

Answer 1

Я думаю, что вам нужно предотвратить реальное поведение ссылки, которая переключает дроу-ап.

$(".sidebar-dropdown > a").click(function(e) {
  e.preventDefault();
  ....the rest

По крайней мере, это предотвратит '#' в URL.