Адаптивный дизайн с использованием jQuery завершается неудачно при обновлении страницы

Question

Я реализовал адаптивный дизайн на своем веб-сайте, но также применил вариант с двумя языками, поэтому адаптивный дизайн не точен после изменения языка (из-за направления текста ltr / rtl).

Так что я использовал функцию jQuery resize, чтобы проверить, когда размер экрана ниже 1024px, если true, css изменится.

$(document).ready(function() {
 $("#english").click(function() {
    //responsive resizing css
    $(window).resize(function() {
   if ($(window).width() < 1024) {
            $(".aaa").css( "padding-left", "250px" );
   }
  });
 });
});

Codepen

Пока что это работает, но если вы обновите sh страницу на 1024px и нажмете Engli sh, CSS будет применяться только после изменения размера страницы (с помощью прокрутки CTRL + мыши).

Как применить изменения CSS, даже если пользователь обновит sh страницу на меньшем экране?

РЕДАКТИРОВАТЬ:

Я хочу, чтобы изменение CSS было применяется только тогда, когда размер экрана ниже 1024 пикселей, иначе CSS не будет применяться.

Answer 1

Извлечение блока внутреннего кода в именованную функцию:

function adjustPadding() {
   if ($(window).width() < 1024) {
       $(".aaa").css( "padding-left", "250px" );
   }
}

Затем вызовите это в обоих местах:

$("#english").click(adjustPadding);
$(window).resize(adjustPadding);

Обычно вы не хотите, чтобы обработчики событий были вложенными, поэтому обработчик resize внутри обработчика click не идеален. По сути, вы создаете новый обработчик изменения размера для каждого клика с этой стратегией.

Кроме того, как было упомянуто в комментарии wlh , это можно сделать с помощью CSS и носителя запрос:

.aaa {padding: 250px;}

@media (min-width: 1024px) {
    .aaa {padding: 0;}
}

Answer 2

Проблема в том, что вы связываете событие изменения размера окна после нажатия на ссылку. Вам необходимо отделить привязку окна от привязки клика:

    $(document).ready(function() {

        //Click event binding
        $("#english").click(function() {                                   
            Resize();
        });

        //Window resize event binding
        $(window).resize(function () {
            Resize();
        });

        function Resize() {
            console.log("Resize function called");
            if ($(window).width() < 1024) {
                console.log("Window Resize Executed");
                $(".aaa").css("padding-left", "250px");
            }
        }

    });