Click to Add class, Click again remove class thường ứng dụng để làm Menu Mobile (Menu trên di động). Click một lần để show các Sub Menu (Menu con cấp 2, 3) và click vấn nữa để ẩn đi.
Cách ứng dụng:
1. Xem web với chế độ di động (Responsive <600px)
- Truy cập https://www.tinhdauonline.com.vn.
- Chuột phải -> Kiểm tra phần tử
- Xem website trên Giao diện mobile với kích thước Resposive width từ 600px trở xuống.
 |
| Xem cách hoạt động code trên giao diện Responsive |
Bước 2: Tìm với thẻ <nav bắt đầu menu
Di chuyển chuột tới thành phần Click là thẻ <nav với class='menuleft'
=> Xác định được Class click là .menuleft
Bước 3: Xác định Class cần add thêm Class mới
Chúng ta di chuyển chuột tới các thành phần thẻ <ul class='menuleft dropdown-menu homecat' ...
Xác định định Class cần thêm ta chọn .dropdown-menu là phần quản lí các danh mục submenu
 |
| Xác định ul và tìm class của nó |
Bước 4: Đặt tên Class cần thêm và viết CSS cho class mới
Ở đây mình đặt tên class là current với thuộc tính CSS là .current {display: block!important}
Ta thu về được đoạn code sau
<script>$(".menuleft").click(function () { $('.dropdown-menu').toggleClass('current');});
</script>
<style>
.current {display: block!important}
</style>
Cách hoạt động:
Khi click chuột và phần menu có class là .menuleft . Ngay lặp tức nó sẽ tìm tới class quản lí Submenu là .dropdown-menu thêm cho nó một class mới là current có thuộc tính css .current {display: block!important} giúp show (hiển thị) ra các menu con khi nhấp.
Khi nhấp vào 1 lần nữa tại class .menuleft nó sẽ tự động Remove current vừa thêm. Lúc đó ta dùng .toggleClass để có tác dụng trả ngược về khi click.
Nâng cao:
Mình muốn click 1 lần để hiện các submenu cấp 1, cấp 2, cấp 3 chỉ cần 1 lần nhấp chuột thì ta dùng
<script>$(".menuleft").click(function () { $('.dropdown-menu,.dropdown-menu1,.dropdown-menu2').toggleClass('current');});</script><style>.current {display: block!important}</style>
Lưu ý:
- Ta thêm các class cần thêm class là .dropdown-menu1,.dropdown-menu2. Cách nhau bằng dấu phẩy nhé nếu có nhiều hơn....
- Khi ấy các class này đều được thêm class curent mang giá trị .current {display: block!important}
- Ta nhớ viết các Class cho các submenu cấp 1,2,3 này là .dropdown-menu1,.dropdown-menu2 cho dễ quản lí nhé!
Để viết được tính năng menu như thế hoạt động trên Trang Chủ, Trang nội dung, Trang Mobile khác nhau thì phải tìm hiểu các phần sau:
-------------
3. Và Nắm vững CSS và HTML là chuyện đương nhiên rồi
