Phương thức slideToggle trong jQuery
Phương thức tiếp theo -
slideToggle
hoạt động như sau: nếu phần tử đang ẩn - nó sẽ hiển thị
phần tử đó, còn nếu đang hiển thị - nó sẽ ẩn đi. Sự tiện lợi
của phương thức này là chúng ta có thể gắn tất cả vào
một nút bấm duy nhất, thay vì hai nút như trong
các bài học trước.
Hãy cùng xem ví dụ sau. Giả sử mã HTML của chúng ta trông như thế này:
<button id="toggle">click me</button>
<div id="elem">text...</div>
Và có CSS:
#elem {
padding: 10px;
width: 150px;
height: 150px;
border: 1px solid green;
margin-top: 10px;
}
Bây giờ chúng ta sẽ viết mã, để khi nhấp vào một nút, phần tử sẽ ẩn hoặc hiển thị:
$('#toggle').click(function() {
$('#elem').slideToggle(1000);
});
