如何使用 CSS3 制作手风琴菜单？

Question

如何仅使用 HTML5 和 CSS3 创建可扩展菜单？

我只想显示 4 个菜单项和一个查看所有列表项，单击查看全部应该展开所有列表项。

Answer 1

有多种制作方法！例如以下。 HTML 看起来像这样。有一个 div，您单击它，下面的 div 将展开。这只有使用伪选择器 :target 才有可能。

<div class="accordion">
    <div id="one" class="section">
            <h3>
                    <a href="#one">Heading 1</a>
            </h3>
            <div>
                    <p>Content</p>
            </div>
    </div>
    <div id="two" class="section">
            <h3>
                    <a href="#two">Heading 2</a>
            </h3>
            <div>
                    <p>Content</p>
            </div>
    </div>
</div>​




.accordion h3 + div {
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;
}

.accordion :target h3 + div {
        height: 100px;
}

.accordion .section.large:target h3 + div {
        overflow: auto;
}

我为你制作了一个可用的小提琴。看看它：检查我！

Answer 2

带有

<details />

标签的支持良好且更简单的解决方案（参考： mdn - 详细信息披露元素）

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

Answer 3

我的方法有一点 js 和无线电输入魔法。没有任何延迟、故障或动画帧丢失。具有动态内容高度

document.querySelectorAll('.accordion .inner').forEach(p => {
  p.style.marginTop = '-'+p.offsetHeight+'px';
});

/* ignore */
body {  
  width: 500px;
}
label {
  display: block;
  cursor: pointer;
  background: #ccffff;
  cursor: pointer;
  box-sizing: border-box;
  padding: 20px;
  font-size: 20px;
}
label:hover {
    font-weight: bold;
}
p {
  margin: 0;
  padding: 0 20px;
}
/* end ignore */

.content {
  overflow: hidden;
}
.inner {
  transition: all 0.3s ease-in-out;
  margin-top: -20000px;
}
input:checked ~ .content .inner {  
  margin-top: 0 !important;
}

<div class="accordion">
  <div class="item">
    <label for="state1">Button</label>
    <input type="radio" id="state1" name="state" value="1" hidden>
    <div class="content">
      <div class="inner">
        <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit...</p>
      </div>
    </div>
  </div>
  
  <div class="item">
    <label for="state2">Button2</label>
    <input type="radio" id="state2" name="state" value="2" hidden>
    <div class="content">
      <div class="inner">
        <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit...</p>
      </div>
    </div>
  </div>
</div>