Почему не работает код js?

Question

Есть макет с выезжающим rightside_menu и соответствующей версткой, но при нажатии на кнопку ничего не работает.

 <button class="header__btn">
   <img class="icon__menu" src="images/icon_menu.svg">
 </button>


.rightside{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    max-width: 698px;
    width: 100%;

    &.rightside--close{
        transform: translateX(100%);
    }


(function () {
    $('.header__btn').on('click', function(){
        $('.rightside').removeClass('rightside--close')
    });
    $('.rightside').on('click', function(){
        $('.rightside__close').addClass('rightside--close')
    });
})

Answer 1

Вот простейший рабочий вариант, играйтесь

<button class="button">Click me</button>
<div class="menu">
    <div class="menu__item">Пункт меню</div>
    <div class="menu__item">Пункт меню</div>
    <div class="menu__item">Пункт меню</div>
    <div class="menu__item">Пункт меню</div>
    <div class="menu__item">Пункт меню</div>
    <button class="close__menu">Close menu</button>
</div>

<style>
    .menu {
        position: fixed;
        top: 0;
        right: -110%;
        border: 1px solid black;
        transition: 0.3s;
        width: 100%;
        height: 100%;
    }
    .menu__active {
        right: 0;
        background-color: #fff;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(function() {
        $('.button').click(() => {
            $('.menu').addClass('menu__active');
        })
        $('.close__menu').click(() => {
            $('.menu').removeClass('menu__active');
        })
    });
</script>

БЛОГ НА HUSL

Почему не работает код js?

Ответы (1 шт):