Question

当您单击扰流板内的链接时，扰流板会关闭。如何解决？

这是剧透内部的链接：<a href="#">test</a>

    .awm_spoilerbox:focus .awm_spoiler {display: block;}
    .awm_spoilerbox:focus .awm_close {display: block;opacity: .75;}
    .awm_spoilerbox:focus .awm_open {display: none;}
    .awm_close {display: none;}
    .awm_open {display: block;}
    .awm_spoilerbox:focus .active {display: block;}

    .awm_spoiler {
      position: absolute;
      display: none;
      width: 100%;
      height: auto;
      left: 0;
      top: 30px;
    }

    <div class="awm_spoilerbox" role="tab" tabindex="0">
      <a class="awm_open">Open</a>
      <a tabindex="1" class="awm_close">Close</a>
      <div class="awm_spoiler">
        test <a href="#">test</a>
      </div>
    </div>

Answer 1

您需要<input type="checkbox">来记住扰流板是打开还是关闭：

.spoiler-box input {
  display: none;
}
.spoiler-box label {
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 5px 20px;
  background: #e1a;
  color: #fff;
  text-align: center;
  font-size: 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .6s;
}
.spoiler-box .spoiler {
  width: 90%;
  height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 10px auto 0; 
  padding: 10px; 
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: all .6s;
}
.spoiler-box input:checked ~ .spoiler{
  height: auto;
  opacity: 1;
  padding: 10px;
}
.spoiler-box input:checked ~ .open,
.spoiler-box input ~ .close {
  display: none;
}
.spoiler-box input:checked ~ .close {
  display: block;
}

<div class="spoiler-box">
  <input type="checkbox" id="spoiler"/> 
  <label for="spoiler" class="open">Open</label>
  <label for="spoiler" class="close">Close</label>
  <div class="spoiler"><a href="#">test</a></div>
</div>

Answer 2

奇怪的是我以前没有考虑过。解决方案非常简单：

.awm_spoiler:hover{display: block;}

单击链接关闭包含tabindex =“ 0”的元素

2 个答案: