Javascript мешает другим специфическим JavaScript

Question

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

Мой javascript для моей кнопки переключения бокового меню не будет работать при первой загрузке в макет, но будет работать, если щелкнуть ссылку в том же макете. Тогда это не сработает при перезагрузке любой страницы в том же макете.

Я «решил» это, добавив ...

//= require check_width_toggle на мое приложение. Js

Полная заявка.js:

//= require rails-ujs
//= require activestorage
//= require check_width_toggle
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

Это работает, только если оно выше jquery3

Хотя я заметил, что это мешает другим javascript, но я смог исправить эти ситуации с помощью add:

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>

... в верхней части представлений с использованием JavaScript.

Но у меня есть еще один фрагмент javascript, который мешает мне решить то, что я пока не сделал.

Это мой чекбокс для проверки того, сколько чекбоксов отмечено при загрузке и при нажатии ...

Флажок JS :

function updateCheckboxes() {
  var $cs = $('#checkbox input:checkbox:checked');
  if ($cs.length >= 4) {
    $('#checkbox input:checkbox:not(:checked)').attr("disabled", true);
  } else {
    $('#checkbox input:checkbox').attr("disabled", false);
  }
}

$(document).on('turbolinks:load', function() {
  updateCheckboxes();
  $('#checkbox input:checkbox').change(updateCheckboxes)
})


$(".rotate").click(function(){
$(this).toggleClass("down")  ;
})

А вот JS для переключения меню, которое, кажется, испортилось. Имейте в виду, что я использую turbolinks, поэтому, если вы видите какой-либо код, я должен изменить его, не стесняйтесь, дайте мне знать предложения

$(function(){

  function checkWidthAndToggle() {
      if($(window).width()<=992){
          $("#wrapper").removeClass("toggled");
      }else{
          $("#wrapper").addClass("toggled");
      }
  }

  $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
  });

  $(window).resize(checkWidthAndToggle);

  checkWidthAndToggle();
});

Проблемы, не требующие файла "check_width_toggle":

1.Не нажимайте для переключения загрузки страницы в макет.

2.Не нажимайте кнопку переключения, если не щелкнуть ссылку на новую страницу в том же макете.

3.Не нажимайте кнопку для переключения при перезагрузке страницы.

Преимуществами являются все остальные JS, работающие в обычном режиме, за исключением самого меню.

Проблемы с требованием:

1. Вмешательство в другие теги и файлы JS-скрипта.

- «решил» это, добавив теги сценария для jquery, но не работая для всех

2.Особенно мешает функции чекбокса код JavaScript.

Другие уведомления:

Когда я убираю команду require и use:

<%= javascript_include_tag 'application', 'check_width_toggle', 'data-turbolinks-track': 'reload' %>

в отличие от:

<%= javascript_include_tag 'check_width_toggle' %>

Это должно быть проблема с турболинками?

Его полная противоположность при использовании ...data-turbolinks-track... Это будет работать ТОЛЬКО при загрузке и перезагрузке. Если щелкнуть ссылку в макете, она перестает работать.

Что я хочу:

Для переключения меню на нажатие, несмотря ни на что. Я заметил, что средство проверки ширины в коде всегда будет работать, просто кажется, что функция click для переключения класса - это то, где проблема, кажется,

Есть ли веская причина иметь дерево внизу, например, порядок выполнения? Из того, что мне говорили и читали раньше, дерево всегда должно быть внизу?