如何操作 - 可關閉列表項
瞭解如何使用 JavaScript 關閉列表項。
可關閉列表項
點選列表項右側的“x”符號即可關閉/隱藏它。
如何建立可關閉的列表項
步驟 1) 新增 HTML
示例
<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>
步驟 2) 新增 CSS
示例
* {
box-sizing: border-box;
}
/* 樣式列表（移除邊距和專案符號等）*/
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/* 樣式列表項 */
ul li {
border: 1px solid #ddd;
margin-top: -1px; /* 防止雙重邊框 */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
position: relative;
}
/* 懸停時新增淺灰色背景 */
ul li:hover {
background-color: #eee;
}
/* 樣式關閉按鈕 (span) */
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}
步驟 3) 新增 JavaScript
示例
// 獲取所有類名為 "close" 的元素
var closebtns = document.getElementsByClassName("close");
var i;
// 迴圈遍歷元素，並在點選時隱藏其父元素
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
自己動手試一試 »
