css - 鼠标悬停和单击时 html div 的下拉效果

Question

此 question 中的答案之一正在使用纯 css 方法:

HTML:

<div id="summary">Sample</div>
<div id="detail">Detail of this summary</div>

CSS:

> #summary:hover + #detail, #detail:hover {   display: block; }
> #detail {   display: none; }

我的问题是我们如何将点击事件包含在像开关按钮一样的地方？

Answer 1

使 #summary div 成为 anchor 并在其上添加样式。

#summary:hover+#detail,
#detail:hover {
  display: block;
}

#detail {
  display: none;
}

#summary:focus+#detail,
#detail:focus {
  display: block;
}

<a id="summary" href="javascript:void(0);">Sample</a>
<div id="detail">Detail of this summary</div>

.summary:hover+.detail,
.detail:hover {
  display: block;
}

.show.detail {
  display: block;
}

.detail {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample1</a>
  <div class="detail">Detail of this summary</div>
</div>
<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample2</a>
  <div class="detail">Detail of this summary</div>
</div>

<div class="wrapper">
  <a class="summary" href="javascript:void(0);">Sample3</a>
  <div class="detail">Detail of this summary</div>
</div>

<script>
  $(".summary").on("click", function() {
    $(this).next().toggleClass("show");
  })
</script>