如何创建 - 可关闭的列表项
了解如何使用 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;
}
/* 设置关闭按钮的样式（跨度） */
.close {
cursor: pointer;
position: absolute;
top: 50%;
right: 0%;
padding: 12px 16px;
transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}
步骤 3) 添加 JavaScript:
实例
/* 用 class="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';
});
亲自试一试 »
