Как сделать аккордеон меню, для мобильных устройств?

Question

Всем привет!
Изначально это обычное меню , но когда ширина окна меньше 650px - оно должно становится аккордеоном, и наоборот.
Вот , непосредственно footer меню:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Doc</title>

    <!-- Add styles -->
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        .footer{
            color: #fff;
            border-top: 1px solid #8A011A;;
            background-color: grey; 
            padding-top: 50px;
            padding-bottom: 30px;
            text-align: center;
        }
        .footer__items{
            max-width: 840px;
            margin: 0 auto 35px;
            display: flex;
            justify-content: space-between;
        }
        .footer__item{
            text-align: left;
        }
        .footer__item-list{
            list-style: none;
        }
        .footer__item-list li{
            margin-bottom: 8px;
        }
        .footer__item-title{
            font-weight: bold;
            font-size: 15px;
            line-height: 20px;
            margin-bottom: 17px;
            letter-spacing: 2px;
        }
        .footer__item-link{
            font-weight: normal;
            font-size: 14px;
            line-height: 19px;
            color: #e6e6e6;
        }
        .footer__item-link:hover{
            color: #FFFFFF;
        }

        @media(max-width: 960px){
            .footer{
                padding: 50px 15px 30px;
            }
            .footer__items{
                flex-wrap: wrap;
            }
            .footer__item{
                width: 50%;
                margin-bottom: 20px;
            }
        }

        @media(max-width: 650px){
            .footer__items{
                max-width: 220px;
            }
            .footer__item{
                width: 100%;
            }
            .footer__item-title{
                cursor: pointer;
            }
            .footer__item-list{
                display: none;
            }
        }
    </style>

</head>
<body>

    <footer class="footer">
        <div class="footer__items">
            <div class="footer__item">
                <h5 class="footer__item-title">COMPANY</h5>
                <ul class="footer__item-list">
                    <li><a class="footer__item-link" href="#">About TripOp</a></li>
                    <li><a class="footer__item-link" href="#">Work with Us</a></li>
                    <li><a class="footer__item-link" href="#">Press Room</a></li>
                    <li><a class="footer__item-link" href="#">Become a Partner</a></li>
                </ul>
            </div>

            <div class="footer__item">
                <h5 class="footer__item-title">DISCOVER</h5>
                <ul class="footer__item-list">
                    <li><a class="footer__item-link" href="#">How to Book?</a></li>
                    <li><a class="footer__item-link" href="#">Methods of Payment</a></li>
                    <li><a class="footer__item-link" href="#">General Conditions</a></li>
                    <li><a class="footer__item-link" href="#">Privacy Policy</a></li>
                    <li><a class="footer__item-link" href="#">Site Map</a></li>
                </ul>
            </div>

            <div class="footer__item">
                <h5 class="footer__item-title" >CONNECT WITH US</h5>
                <ul class="footer__item-list">
                    <li><a class="footer__item-link" href="#">Contact Us</a></li>
                    <li><a class="footer__item-link" href="#">Facebook</a></li>
                    <li><a class="footer__item-link" href="#">Instagram</a></li>
                    <li><a class="footer__item-link" href="#">YouTube</a></li>
                    <li><a class="footer__item-link" href="#">Newsletter</a></li>
                </ul>
            </div>

            <div class="footer__item">
                <h5 class="footer__item-title">BLOG</h5>
                <ul class="footer__item-list">
                    <li><a class="footer__item-link" href="#">Достопримечательности</a></li>
                    <li><a class="footer__item-link" href="#">Достопримечательности</a></li>
                    <li><a class="footer__item-link" href="#">Достопримечательности</a></li>
                    <li><a class="footer__item-link" href="#">Достопримечательности</a></li>
                    <li><a class="footer__item-link" href="#">Достопримечательности</a></li>
                </ul>
            </div>
        </div>
    </footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(window).on('load resize', function () { 
            if (window.innerWidth <= 650) {

                $('.footer__item-title').addClass('active__item');

            } else if(window.innerWidth > 650 && $('.footer__item-title').hasClass('active__item')) {

                $('.footer__item-title').removeClass('active__item');

            }
        });

        //работает с .footer__item-title, но не работает с .active__item
        $('.active__item').on('click', function(e){
            e.preventDefault();
        
            var menu = $(this).closest('.footer__items');
            
            if (false == $(this).next().is(':visible')) {
                menu.find('.footer__item-list').slideUp();
            }
            
            $(this).next().slideToggle();
        });
    </script>
</body>
</html>

Как сделать чтобы работало событие click, повешенное на .active__item? (по клику должно разворачиваться аккордеон меню, Код аккордеон меню: https://keengo.ru/blog/javascript/vertikalnoe-menyu-akkordeon-na-jquery/) Всем большое спасибо!

БЛОГ НА HUSL

Как сделать аккордеон меню, для мобильных устройств?

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