Question

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

由于

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;
}

Answer 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

它有点粗糙，可能需要一些抛光

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

1 个答案: