Hôm nay lại ngồi lò mò viết theme cho wordpress nên lại tiếp tục dính vào cái công việc hiển thị sub-menu cho cái menu mobile bằng cách thêm class vào để nó hiển thị lên mỗi lần mình nhấp chuột vào cái menu có menu con.
Cái này trên mạng chia sẽ đầy ra nhưng mình tìm toàn thấy mọi người chia sẽ được cái này thì lại mất cái kia mà đâu ra cáu (chắc do cái tính yêu cầu hoàn thiện quá nên dù chưa phải chuyên nghiệp cũng đòi hỏi cao :D).
Và rồi sau mấy tiếng mò mẫm các kiểu con đà điểu thì cuối cùng mình kết hợp tất cả trong một từ các chia sẽ trên mạng đưa ra một cái cho riêng mình và lưu lại để sau dùng đỡ tốn công đi mò nữa.
Trong đoạn code này gồm các yêu cầu sau: thêm class khi bấm vào menu có menu con, xoá class đã thêm trước đó khi bấm vào menu khác có menu con, xoá class khi bấm vào vùng không có menu con.
Code đã được test rất kỹ và rất ưng cái cô Lâm Vĩ Dạ (ưng cái bụng :D).
Code xoá class khi resposive//add and remove class on submenu
$(function() {
$(".menu-item-has-children").on("click", function(e) {
$(".sub-menu.active").removeClass("active");
$(this).find(".sub-menu").addClass("active");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is(".menu-item-has-children .sub-menu") === false) {
$(".menu-item-has-children .sub-menu").removeClass("active");
}
});
});
<script>var resizeTimer;$(window).on('resize', function (e) {clearTimeout(resizeTimer);resizeTimer = setTimeout(function () {if ($(window).width() < 578) {$('.nav-menu').parent().addClass('show');} else {$('.nav-menu').parent().parent().removeClass("toggled");}}, 250);});</script>
hoặc
jQuery(document).ready(function($) {
var alterClass = function() {
var ww = document.body.clientWidth;
if (ww > 600) {
$('.topnav').removeClass('responsive');
};
};
$(window).resize(function(){
alterClass();
});
//Fire it when the page first loads:
alterClass();
});