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

- [tintuc]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

[/tintuc]
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Đăng nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2