Событие jQuery onclick не срабатывает при первом щелчке мыши

Моя проблема заключается в том, что я создал функцию jQuery для открытия меню при нажатии на кнопку. Код меню расположен в другом html шаблоне моего проекта Django, и происходит то, что меню не открывается при первом нажатии, но работает после второго. Я также включил часть, изменяющую элемент span кнопки, которая работает с первого нажатия.

Вот мой сниппет для jQuery:

     <script>

        $(document).ready(() => {
        $('#btn').on('click', function () {
                var thisElement = $(this);
                var buttonSpan = thisElement.find('span');
                var menu = $("#menu");
            if(buttonSpan.text() === "Close"){
                buttonSpan.text('Open');
                menu.css('width', '0');
            } 
            else {
            if(buttonSpan.text() === "Open"){
                buttonSpan.text('Close');
                menu.css('width', '20%');
                }   
            }
        })  
        })

    </script>

В моем html нет никаких скриптов, где находится меню, это просто основной div с id 'menu'. Но, как я уже сказал, оно должно работать, так как открывается при втором клике. Я думаю, что это как-то связано с eventlistener, так как я что-то читал об этом, но я не смог понять это в перспективе моей проблемы. Также я пытался изменить (document).ready(() => { на (document).ready(function() {, но это не помогло.

Есть ли что-то ясное, что я упускаю?

Вернуться на верх