- Trang chủ
- Hướng dẫn học
- Hướng dẫn học jQuery
- .toggle[]
Định nghĩa và sử dụng
.toggle[]
hiển thị và ẩn các thành phần phù hợp.- Việc hiển thị và ẩn được luân phiên nhau giữa các lần action [VD action Click].
Cấu trúc
.toggle[Độ bền]
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
$['p'].toggle[300];
$['p'].toggle[fast];
.toggle[Độ bền,'easing']
Độ bền có thể bằng số hoặc bằng chữ: slow, fast.
Easing có thể sử dụng swing hoặc linear
$['p'].toggle[300,'swing'];
Bài học chỉ muốn cho bạn hiểu cách sử dụng .toggle
, muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.
.toggle[Độ bền]
Html viết:
Tiêu đề div { background-color: blue; display: none; height: 100px; width: 150px; } $[function[]{ $['button'].click[function[]{ $['.test03'].toggle[2000]; }]; }];Click
toggle[2000]
Hiển thị trình duyệt:
Hiệu ứng sẽ luân phiên hiển thị và ẩn thông
qua nhiều lần click vào button
.
So sánh code HTML trước và sau khi có jQuery:
Click toggle[2000]
| Click toggle[2000]
|
.toggle[Độ bền,function[]{...}]
Html viết:
Tiêu đề div { background-color: blue; display: none; height: 100px; width: 150px; } $[function[]{ $['button'].click[function[]{ $['div'].toggle[2000,function[]{ $[this].css['background-color','red']; }]; }]; }];Click
Thành phần div
Hiển thị trình duyệt:
Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button
, sau khi hoàn thành hiệu ứng sẽ hiển thị nội dung bên trong function.
So sánh code HTML trước và sau khi có jQuery:
Click Thành phần div | Click Thành phần div
|
.toggle[Độ bền,'easing']
Html viết:
Tiêu đề div { background-color: blue; display: none; float: left; margin-right: 20px; height: 100px; width: 150px; } p { clear: both; } .visible { background-color: red; display: block!important; } $[function[]{ $['button'].click[function[]{ $['.swing'].toggle[2000,'swing']; $['.linear'].toggle[2000,'linear']; }]; }];Click
toggle swingtoggle linear
Hiển thị trình duyệt:
Hiệu ứng sẽ luân phiên hiển thị và ẩn thông qua nhiều lần click vào button
.
So sánh code HTML trước và sau khi có jQuery:
Click toggle swing toggle linear
| Click Nội dung mới Nội dung mới
|