LÀM THẾ NÀO ĐỂ - Các Mục Danh Sách Có Thể Đóng Được
Tìm hiểu cách đóng các mục danh sách bằng JavaScript.
Các mục trong danh sách có thể đóng lại
Nhấp vào biểu tượng "x" ở bên phải của mục danh sách để đóng / ẩn nó.
Cách tạo các mục trong danh sách có thể đóng lại
Bước 1) Thêm HTML:
Thí dụ
<ul>
<li>Adele</li>
<li>Agnes<span
class="close">x</span></li>
<li>Billy<span
class="close">x</span></li>
<li>Bob<span class="close">x</span></li>
<li>Calvin<span class="close">x</span></li>
<li>Christina<span class="close">x</span></li>
<li>Cindy</li>
</ul>
Bước 2) Thêm CSS:
Thí dụ
* {
box-sizing: border-box;
}
/* Style the list (remove
margins and bullets, etc) */
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the list items */
ul
li {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent
double borders */
background-color: #f6f6f6;
padding:
12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
position: relative;
}
/* Add a light grey background color on hover */
ul li:hover {
background-color: #eee;
}
/* Style the close button (span) */
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}
Bước 3) Thêm JavaScript:
Thí dụ
/* Get all elements with class="close" */
var closebtns =
document.getElementsByClassName("close");
var i;
/* Loop through the
elements, and hide the parent, when clicked on */
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click",
function() {
this.parentElement.style.display = 'none';
});
}