javascript - 双击缩小div的大小？

Question

您好，我只是想知道是否有一种方法可以通过双击 div 并仅通过使用 CSS 来降低高度。

<div class="container"></div>
    <ul class="accordion">
    <li>
        <a href="#first" class="accordion-header">First</a>
        <div class="accordion-content" id="first">
        <p>Bonjour</p></div>
        </li>

        <li>
        <a href="#second" class="accordion-header">Second</a>
        <div class="accordion-content" id="second">
            <p>Hello</p></div>
        </li>


        <li>
        <a href="#third" class="accordion-header">Third</a>
        <div class="accordion-content" id="third">
            <p>No</p></div>
        </li>

你可以在这个Fiddle中找到我要调整的代码.

Answer 1

这只能在 CSS 中实现，如果您可以在每个 <div class="accordion-content"> 之后立即添加以下 HTML :

<a href="#"></a><input>

然后添加这些样式:

.accordion-content {
  position: relative;
}

.accordion-content a, .accordion-content input {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
}

.accordion-content input:focus {
  z-index: -1;
}

.accordion-content a:focus {
  z-index: 1;
}

Fiddle