0 bình luận · lượt xem

Click to Add class, Click again remove class (Click để thêm class và click remove class)



Một tính năng Javascript quen thuộc mà mình đã chia sẻ và hướng dẫn lần trước. Nhưng trong lần này có thêm phần click thêm 1 lần nữa để remove (Xóa) class/id vừa thêm.

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)

  1. Truy cập https://www.tinhdauonline.com.vn.
  2. Chuột phải -> Kiểm tra phần tử
  3. 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>$(&quot;.menuleft&quot;).click(function () {    $(&#39;.dropdown-menu&#39;).toggleClass(&#39;current&#39;);});
</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>$(&quot;.menuleft&quot;).click(function () {    $(&#39;.dropdown-menu,.dropdown-menu1,.dropdown-menu2&#39;).toggleClass(&#39;current&#39;);});</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




Có thể bạn thích

Không có nhận xét nào:

NỘI QUY:
  • Mọi bình luận sai điều khoản sử dụng sẽ bị xóa mà không cần báo trước.
  • Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi Admin phản hồi.
  • Khi xuất bản bài viết chắc chắn không tránh khỏi lỗi về chính tả, cú pháp.

Hãy cùng tham gia bình luận về bài viết này nhé!