JavaScript实现点击隐藏

最新推荐文章于 2024-05-23 16:08:37 发布

花卷卷爱吃肉

最新推荐文章于 2024-05-23 16:08:37 发布

阅读量535

点赞数 10

分类专栏： JavaScript 文章标签： javascript css html5

本文链接：https://blog.csdn.net/2301_76675652/article/details/134695708

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这是一篇极简的 HTML + JS 示例，用于操作 DOM 元素并实现简单的交互效果。可以作为初学者的 JavaScript 入门练手项目。

代码中包含了两个无序列表，每个列表有 4 个 li 项，每个 li 相关联的内容中都有一个隐藏按钮 `<a>隐藏</a>` 。

文章的目的，就在于点击按钮“隐藏”，使 li 块中更新为隐藏状态

实现方式很简单，由于每个 li 项中都有一个隐藏按钮，我们可以通过 querySelectorAll 获取到所有 this 元素，然后针对每个 this 绑定一个 ‘click’ 事件监听，相应处理函数实现简单的隐藏事件。怎样隐藏呢？在 click 相应我们把父元素设置非内联标志减去块级元素就大功告成，步骤如下：

（1）获取所有按钮元素 return array

（2）为个按钮添加监听函数,监听click事件，函数内部含处理状态的语句

（3）点击隐藏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      font-size: 25px;
    }

    ul li a {
      color: aquamarine;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <ul>
    <li>轻轻的我走了，<a>隐藏</a></li>
    <li>正如我轻轻的来；<a>隐藏</a></li>
    <li>我轻轻的招手，<a>隐藏</a></li>
    <li>作别西天的云彩。<a>隐藏</a></li>
  </ul>
  <ul>
    <li>纳河畔的金柳，<a>隐藏</a></li>
    <li>是夕阳中的新娘；<a>隐藏</a></li>
    <li>波光里的艳影，<a>隐藏</a></li>
    <li>在浅浅荡漾；<a>隐藏</a></li>
  </ul>
  <script>
    const closebtn = document.querySelectorAll('a')
    for (let i = 0; i < closebtn.length; i++) {
      closebtn[i].addEventListener('click', function () {
        this.parentNode.style.display = 'none'
      })
    }
  </script>
</body>

</html>