以下实例我们演示了如何使用 JavaScript 来关闭列表选项：
HTML 代码
ul>
li>Adeleli>
li>Agnesspan class="close">xspan>li>
li>Bobspan class="close">xspan>li>
li>Christinaspan class="close">xspan>li>
li>Cindyli>
ul>
li>Adeleli>
li>Agnesspan class="close">xspan>li>
li>Billyspan class="close">xspan>li>
li>Bobspan class="close">xspan>li>
li>Calvinspan class="close">xspan>li>
li>Christinaspan 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;}
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';
});
}
var closebtns = document.getElementsByClassName("close");
var i; /* 循环元素，在点击时关闭它 */
for (i = 0; i closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
评论(0)