javascript - 仅通过单击来折叠/关闭按钮

Question

我正在尝试编写一个可以在同一行中多次放置的响应式按钮，并始终在包含该按钮的行下方显示其内容。

代码片段中有一个工作代码，但它有一个小缺陷:由于使用了伪类 focus，一旦按钮打开，点击屏幕上的任意位置即可关闭

按钮的通常行为是您必须单击它才能关闭它，那么是否有可能为这个按钮获得这种行为？

我用了其他的伪类但没有成功，我想只有javascript可以完成这项工作。

.container {
  position: relative;
  margin: 2em;
}
.details {
  display: none;
}
.collapsible:focus {
    margin-bottom: 1.5em;
    pointer-events: none;
}
.collapsible:focus + .details 
{
  display: block;
  margin-top: -1.15em;
  position: absolute;
  left: 0;
  right: 0;
  background: yellow;
}

<div class=container>

You can <button class="collapsible">place</button><span class=details>yes</span> more than <button class="collapsible">one</button><span class=details>nice</span> per line, they are responsive and the content is always shown just <button class="collapsible">below</button><span class=details>cool</span> the line containing the button.
But once opened, you can close it with a click <button class="collapsible">everywhere</button><span class=details>not good</span> on the screen

</div>

用于进一步定制的 Javascript

<script type="text/javascript">
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.parentElement.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
</script>

Answer 1

这个想法的实现有点复杂，所以我只是回答。

这使用了一个古老的技巧，即与隐藏的复选框关联的标签用作点击目标。由于单击标签会选中或取消选中复选框，并且复选框的选中状态有一个伪类，我们可以使用它来保持样式的状态。感谢TylerH对于 his answer类似问题Can I have an onclick effect in CSS? .

我在此处使用部分属性选择器实现了它，因此在此示例中，任何复选框都必须具有以“demo”开头的 ID。复选框必须有一个 ID，以便 label 的 for 属性可以 Hook 。

.container {
  position: relative;
  margin: 2em;
}

.collapsible:focus {
  margin-bottom: 1.5em;
  pointer-events: none;
}


label {
  display: inline-block;
  background: lightgrey;
}

[id^="demo"] {
  display: none;
}

/* details that are next to labels that are next to unchecked checkboxes are hidden */
[id^="demo"]:not(:checked)+label+.details {
  display: none;
}


/* details that are next to labels that are next to checked checkboxes are displayed */
[id^="demo"]:checked+label+.details {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  background: yellow;
}

/* labels that are next to unchecked checkboxes have a different color 
   so you can track which ones are "on" */
[id^="demo"]:checked+label {
  background: blue;
  color: white;
}

<div class=container>

  You can <input type="checkbox" id="demo01" /><label for="demo01" >place</label><span class=details>yes</span> more than <input type="checkbox" id="demo02" /><label for="demo02">one</label><span class=details>nice</span>  per line, they are responsive and the content is always shown just <input type="checkbox" id="demo03" /><label for="demo03">below</label><span class=details>cool</span> the line containing the button. But once opened, you can close
  it with a click <input type="checkbox" id="demo04" /><label for="demo04">everywhere</label><span class=details>not good</span> on the screen

</div>