可关闭的列表项

---

了解如何使用 JavaScript 关闭列表项。

---

可关闭的列表项

单击列表项右侧的"x"符号以关闭/隐藏它。

• Adele
• Agnes×
• Billy×
• Bob×
• Calvin×
• Christina×
• Cindy

亲自试一试 »

---

如何创建可关闭的列表项

步骤 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';
});
亲自试一试 »