Toggleclass перестает работать при перезагрузке страницы, как сохранить его активным?

Question

У меня есть тумблерКласса клика с предотвращением по умолчанию, который работает при клике, но когда я перезагружаю страницу, меню не будет переключаться при клике, хотя будет продолжать проверять ширину для переключения.

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

Вот код для этого:

$(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();
});

Как я могу продолжать разрешать toggleClass после перезагрузки страницы?

Я также использую турболинки.

Answer 1

Не уверен, что именно проблема была, но то, что я сделал, было добавлено

// = требуется имя_файла.js

в моем файле application.js вверху и решил проблему.

Я заметил, когда переместил дерево // = require. наверх, эта проблема исчезнет. Поэтому вместо этого мне потребовался сам файл, чтобы он загружался раньше, чем большинство других файлов. Я использую Bootstrap, jQuery и turbolinks, поэтому я предполагаю, что один из них влиял на нагрузку.

Answer 2

Если вы используете turbolinks 5 (turbolinks в ruby ​​на rails 5), вы должны добавить прослушиватель событий для события turbolinks:load.

Подробнее: https://github.com/turbolinks/turbolinks#observing-navigation-events