CSS解决方案

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成为锚点，并为其添加样式。

#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>

Answer 2

CSS解决方案

使用复选框并将其同步到标签。该复选框可以隐藏，因此似乎标签是唯一的按钮。

<input id='ID' type='checkbox' hidden>
<label for='ID'>Click the label the checkbox gets clicked as well</label>

标签 for 属性值必须与上述复选框的ID匹配。

将内容放在复选框下方。设置其max-height: 0;和overflow:hidden

<input id='ID' type='checkbox' hidden>
<label for='ID'>Click the label the checkbox gets clicked as well</label>

<article class='content'>...</article>

设置以下CSS规则集：

 #ID:checked + label + .content { max-height: 1000px}

+是 Adjacent Sibling Combinator ，它的基本目标是直接兄弟姐妹位于选择器右侧或下方（基本上是下一个元素）。

该演示遵循上述基本概念，但是有更多的元素和转换，因此请注意复选框为 :checked 时以及在其位置时位置以及它们与CSS的关系。不是。

演示

*,
*:before,
*:after {
  margin: 0;
  padding: 0
}

.menu {
  margin: 20px auto;
  visibility: hidden;
  width: 92%;
}

.trigger {
  visibility: visible;
}

.trigger label {
  display: block;
  min-height: 20px;
  cursor: pointer;
  border: 3px ridge crimson;
  border-radius: 4px;
  padding: 3px 0 0 5px;
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: all .75s;
}

img {
  display: block;
  margin: 5px 5px 0;
  float: right;
}

#chx:checked+.menu .trigger,
.trigger:hover {
  background: rgba(0, 0, 0, 0.8);
  color: orangered;
}

#chx:checked+.menu .content,
.trigger:hover+.content {
  max-height: 1000px;
  transition: all .75s;
  visibility: visible
}

<input id='chx' type='checkbox' hidden>
<figure class='menu'>
  <figcaption class='trigger'>
    <label for="chx">TRIGGER</label>
  </figcaption>
  <article class='content'>
    <img src='https://yt3.ggpht.com/-7DsR5xtp9pM/AAAAAAAAAAI/AAAAAAAAAAA/nO22Um9xa28/s100-mo-c-c0xffffffff-rj-k-no/photo.jpg'>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </article>
</figure>

Answer 3

因此，您只想单击包含菜单吗？我找到了一种方法，只能使用少量的JavaScript：

title

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

将其放入您的页面即可使用。

鼠标悬停并单击时，html div的下拉效果

3 个答案:

CSS解决方案

演示