以下实例演示了如何使用 JavaScript 来关闭列表选项：

HTML 代码

<ul><li>Adeleli><li>Agnes<span class="close">xspan>li><li>Billy<span class="close">xspan>li><li>Bob<span class="close">xspan>li><li>Calvin<span class="close">xspan>li><li>Christina<span class="close">xspan>li><li>Cindyli>ul>

CSS 代码

* {box-sizing: border-box;}/* 列表 */ul {list-style-type: none;padding: 0;margin: 0;}/* 列表选项样式 */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;}/* 鼠标移动过去后添加灰色背景 */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;}

HTML 代码

/* 获得 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';});}

尝试一下 »