**** 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;
// })
}
