[分享]css做单击显示双击隐藏

CSS是网页设计的重要组成部分，因为它可以控制网页中的样式和布局。其中一个常见的需求是单击显示，双击隐藏元素。这在图片或文字列表中经常用到，正如我们下面要介绍的。 第一项 第二项 第三项 我们使用...

CSS是网页设计的重要组成部分，因为它可以控制网页中的样式和布局。其中一个常见的需求是单击显示，双击隐藏元素。这在图片或文字列表中经常用到，正如我们下面要介绍的。

 <ul class="list">
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul> 

我们使用一个无序列表作为我们的示例，包含三个列表项。现在，让我们来添加CSS来实现单击显示和双击隐藏的效果。

 .list li {
        display: none;
    }
    
    .list li.active {
        display: block;
    }
    
    .list li:hover {
        display: block;
    } 

我们首先设置列表项的默认属性为“display：none”，这将使它们在网页加载时隐藏。然后，我们为“active”类设置“display：block”，这将在单击时将该类添加给选定的列表项，使其显示。最后，“hover”伪类设置为“display：block”，这样当鼠标悬停在列表项上时，它们也会显示。

让我们通过添加一些JavaScript来实现双击隐藏的效果，当双击列表项时，“active”类将从它们身上移除，使其再次被隐藏。

 const listItems = document.querySelectorAll('.list li');
    
    listItems.forEach((item) => {
        item.addEventListener('dblclick', () => {
            item.classList.remove('active');
        });
    }); 

我们首先获取包含在列表中的所有项，并使用forEach()方法为每个项目添加双击事件侦听器。当列表项被双击时，“active”类将从它们身上移除，使其再次被隐藏。

这就是如何使用CSS实现单击显示，双击隐藏的效果。这种技术可以应用于各种需要动态控制可见性的项目，例如菜单，图片库或任何需要应对交互式行为的地方。