click JS

 

**** HTML

<div class="footnow-menu">

    <div class="item-footer">

        <div class="footer-menu-title">

            Khám phá Coollook

        </div>

        <div class="footer-menu-content"></div>

    </div>

    <div class="item-footer">

        <div class="footer-menu-title">

            Dịch vụ khách hàng

        </div>

        <div class="footer-menu-content"></div>

    </div>

</div>

**** CSS

.footer-menu-content{

    display: none;

    background: #fff;

    margin: 10px;

    border-radius: 5px;

    padding: 10px;

    text-align: justify;

}

.footer-menu-title {

    position: relative;

    font-size: 20px;

    margin: 0 10px;

    padding: 10px 0;

    border-radius: 5px;

    font-family: cursive;

}

.footer-menu-title i {

    position: absolute;

    right: 0;

    top: 8px;

    cursor: pointer;

}

.item-footer {

    padding-bottom: 1px; 

}

.footer-menu-title:before,

.footer-menu-title:after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0px;

    width: 12px;

    height: 2px;

    border-radius: 10px;

    background-color: #fff;

    margin-top: -1px;

}

.footer-menu-title.is-active:after {

    transform: rotate(0deg);

}

.footer-menu-title:after {

    transform: rotate(90deg);

    transform-origin: center center;

    transition: all .3s;

    position: absolute;

}

.footnow-menu {

    background: #d9be58;

    margin: 0 10px 10px 10px;

    border-radius: 5px;

}

****JS

function menuToggle() {

    

    const menuSelect = $('.footnow-menu');

    $(document).on('click', '.item-footer', function () {

        const _this = $(this);

        const menuSelected = _this.find('.footer-menu-title');

        const menuSelectToggle = _this.find('.footer-menu-content');

        const menuSelectToggleSib = $('.footer-menu-content');

        const menuSelectedSib = $('.footer-menu-title');

        if(menuSelected.hasClass('is-active')) {

            menuSelectToggleSib.slideUp();

            menuSelectedSib.removeClass('is-active');

        } else {

            menuSelectToggleSib.slideUp();

            menuSelectedSib.removeClass('is-active');

            menuSelectToggle.slideDown();

            menuSelected.addClass('is-active');

        }

    });    

    // $(document).on('click', function (e) {

    //     const target = e.target;

    //     const menuCustom = $('.footnow-menu');

    //     if (!menuCustom.is(e.target) && menuCustom.has(e.target).length === 0){

    //         const menuSelectToggleSib = $('.item-footer');

    //         const menuSelectedSib = $('.footer-menu-title');

    //         menuSelectToggleSib.slideUp();

    //         menuSelectedSib.removeClass('is-active');

    //     }

    // });

    // $('.menu-select-item').on('click', function (e) {

    //     e.preventDefault();

    //     const _this =  $(this);

    //     let link = _this.find('a').attr('href');

    //     if(link)  window.location.href = link;

    // })

    // $(document).on('click', '.menu-custom-select', function () {

    //     const _this = $(this);

    //     const menuSelected = _this.find('.menu-select-selected');

    //     const menuSelectToggle = _this.find('.menu-select-items');

    //     const menuSelectToggleSib = $('.menu-select-items');

    //     const menuSelectedSib = $('.menu-select-selected');

    //     if(menuSelected.hasClass('is-active')) {

    //         menuSelectToggleSib.slideUp();

    //         menuSelectedSib.removeClass('is-active');

    //     } else {

    //         menuSelectToggleSib.slideUp();

    //         menuSelectedSib.removeClass('is-active');

    //         menuSelectToggle.slideDown();

    //         menuSelected.addClass('is-active');

    //     }

    // });

    // $(document).on('click', function (e) {

    //     const target = e.target;

    //     const menuCustom = $('.menu-custom-select');

    //     if (!menuCustom.is(e.target) && menuCustom.has(e.target).length === 0){

    //         const menuSelectToggleSib = $('.menu-select-items');

    //         const menuSelectedSib = $('.menu-select-selected');

    //         menuSelectToggleSib.slideUp();

    //         menuSelectedSib.removeClass('is-active');

    //     }

    // });

    // $('.menu-select-item').on('click', function (e) {

    //     e.preventDefault();

    //     const _this =  $(this);

    //     let link = _this.find('a').attr('href');

    //     if(link)  window.location.href = link;

    // })

    

}