如何隐藏描述区域并使其在单击照片时显示？

<div class="photo-container">
  <img src="photo.jpg" alt="照片">
  <div class="description" style="display: none;">
    这是照片的描述。
  </div>
</div>

.photo-container {
  position: relative;
  /* 设置容器的宽度和高度 */
  width: 300px;
  height: 200px;
}

.photo-container img {
  /* 设置照片的宽度和高度 */
  width: 100%;
  height: 100%;
  /* 其他样式设置，例如边框、圆角等 */
}

.photo-container .description {
  position: absolute;
  top: 0;
  left: 0;
  /* 设置描述区域的宽度和高度 */
  width: 100%;
  height: 100%;
  /* 其他样式设置，例如背景色、透明度等 */
}

var photoContainer = document.querySelector('.photo-container');
var description = photoContainer.querySelector('.description');

photoContainer.addEventListener('click', function() {
  description.style.display = 'block';
});