JavaScript 设置列表选项(li)可删除

作者 : 开心源码 本文共788个字,预计阅读时间需要2分钟 发布时间: 2022-05-11 共93人阅读

以下实例我们演示了如何用 JavaScript 来关闭列表选项:

HTML 代码

  • Adele
  • Agnesx
  • Billyx
  • Bobx
  • Calvinx
  • Christinax
  • Cindy

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';

});

}

JavaScript 设置列表选项(li)可删除

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JavaScript 设置列表选项(li)可删除

发表回复