css单击显示隐藏div

CSS单击显示隐藏Div是一个非常常见的功能，也十分实用。它可以让页面更加友好，提高用户体验，下面就来介绍一下如何实现它。

首先，我们需要在HTML中添加一个Div，其中包含我们想要显示和隐藏的内容。我们可以使用以下代码：

<div id="Box">
    <p>这里是要显示或隐藏的内容</p>
</div>

接下来，我们需要添加CSS样式，实现点击时显示和隐藏Div。我们可以使用以下代码：

#Box{
    display: none;
}

#Box.show{
    display: block;
}

上面的代码中，我们首先将display属性设置为none，这样Div就不会显示。然后，我们使用#Box.show选择器将display属性设置为block，这样当我们单击Div时，它就会显示。

最后，我们需要添加JavaScript代码，实现单击时切换显示和隐藏。我们可以使用以下代码：

var Box = document.getElementById('Box');

Box.addEventListener('click',function(){
    if(Box.classList.contains('show')){
        Box.classList.remove('show');
    }else{
        Box.classList.add('show');
    }
});

上面的代码中，我们首先获取了Div元素，并为它添加了单击事件。在单击事件中，我们使用classList.contains()方法来检查Div是否有show类，如果有，就将其移除，否则就添加show类。

至此，我们就成功实现了CSS单击显示隐藏Div的功能。以上是代码实现过程，下面是完整代码展示：

<div id="Box">
    <p>这里是要显示或隐藏的内容</p>
</div>

#Box{
    display: none;
}

#Box.show{
    display: block;
}

var Box = document.getElementById('Box');

Box.addEventListener('click',function(){
    if(Box.classList.contains('show')){
        Box.classList.remove('show');
    }else{
        Box.classList.add('show');
   }
});