Bài viết này hướng dẫn đảo ngược các phần tử trong thẻ UL – OL nhanh bằng CSS.
CSS cần thiết
.reverse-list { display: flex; flex-direction: column-reverse; }
Nếu chỉ có nhu cầu đảo ngược danh sách, thì các bạn thêm class
này vào thẻ UL – OL là đủ.
Bấm để đảo ngược danh sách
$('#reverse').click(function() { if ($(this).hasClass('curr-reverse')) { $('#list-to-reverse').removeClass('reverse-list'); $(this).removeClass('curr-reverse'); } else { $('#list-to-reverse').addClass('reverse-list'); $(this).addClass('curr-reverse'); } });
Đơn giản chỉ cần thêm và xóa reverse-list
khi bấm.
Chúc các bạn thành công!