纯 CSS 手风琴 - 揭示内容问题答案

【问题标题】：Pure CSS Accordion - Reveal Content Issue纯 CSS 手风琴 - 揭示内容问题
【发布时间】：2016-09-08 17:09:44
【问题描述】：

我只使用 html 和 css 创建了一个简单的手风琴，但有一个问题希望你能帮助我。手风琴工作正常，但使用 display:none 隐藏内容，然后 display:block 显示它。我希望平滑过渡向下滑动 0.5 秒，以便在按下链接时显示内容，当用户按下另一个链接时，我想向上滑动活动内容并向下滑动活动内容。

谢谢

HTML 代码：

<section id="accordion">
   <section id="accordion-title-1">
       <a href="#accordion-title-1">
           <h2>Videos</h2>
       </a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p>
   </section>
   <section id="accordion-title-2">
       <a href="#accordion-title-2">
           <h2>Videos</h2>
       </a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p>
   </section>
   <section id="accordion-title-3">
       <a href="#accordion-title-3">
           <h2>Videos</h2>
       </a>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis repellat obcaecati fugiat voluptatibus doloremque provident nihil, facilis harum quos excepturi officia assumenda odit, dolorem voluptates quidem molestiae velit, nostrum eligendi.</p>
   </section>
</section>

CSS 代码：

* {
    padding:0px;
    margin:0px;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    font-size: 14px;
}

#accordion {
    margin-top:100px;
    padding:20px;
    background:#2e6572;
}

#c-accordion section {
 line-height: 1.6em;   
}


#accordion section a {
    color:#fff;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: 2px;
    display: inline-block;
    padding-bottom:15px;
    border-bottom: 1px solid red;
}

#accordion #accordion-title-2 a, #accordion #accordion-title-3 a {
    margin-top:20px;
}

#accordion section p {
    color:#bebebe;
    margin-top:20px;
    display: none;
}

#accordion section:target  p {
    display: block;
}

【问题讨论】：

您不能在 display 属性上设置动画。但是，您可以使用 height 和 min-height 属性。我有一些想法，会在一段时间内发布
我建议使用最大高度的过渡。
我已经尝试过身高但我没有找到解决方案也许你可以帮忙
我建议您尝试使用 JavaScript 的解决方案，这样您就不必依赖 CSS 中设置的内容高度和幻数。

标签： css accordion

【解决方案1】：

只是将更改发布到 css

#accordion section p {
    color:#bebebe;
    margin-top:20px;
    max-height:0;
    overflow: hidden;
    transition: max-height 0.5s ease-in;
}

#accordion section:target  p {
    max-height:100px;
    overflow:none;
    transition: max-height 0.5s ease-in;
}

演示：http://jsbin.com/rivayagehe/edit?html,css,output

有点粗糙，可能需要打磨一下

【讨论】：