如何在开头创建包含隐藏内容的标签，仅在您点击时显示？

Question

使用css + html只创建一个单击以展开标签??

Answer 1

此示例将向您展示如何执行此操作：

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}

.table{
  width:400px;
  height:200px;
  margin:50px auto;
}
.alert{
  width:100%;
  height:40px;
  background:#e74c3c;
  text-align:center;
  line-height:40px;
  color:#fff;
  border-bottom:1px solid #fff;
  display:none;
}
.row{
  width:100%;
  height:40px;
  background:#e74c3c;
  text-align:center;
  line-height:40px;
  color:#fff;
  border-bottom:1px solid #fff;
}
.span3, .span2{
  padding:5px 7px;
  border:2px solid #e74c3c;
  color:#e74c3c;
  cursor:pointer;
}

<div class="table">
  <span class="span3" tabindex="0">Hide Me</span>
  <span class="span2" tabindex="0">Show Me</span>
  <br><br>
  <div class="row">
    #1
  </div>
  <div class="row">
    #2
  </div>
  <div class="alert">
    #3
  </div>
</div>

这是一个小提琴：http://jsfiddle.net/6W7XD/6618/