php - Accordion - 在 DIV 中滚动内容

Question

我使用的 Accordion 代码来自:

www.mraffaele.com/labs/css-only-accordions/

这很好用，但我想在一个图 block 上垂直滚动内容。

这fiddle显示我目前的工作。 TITLE TWO 滚动 div 内容。但我试图让它只滚动图 block 的特定部分。这fiddle显示我要滚动的内容。

目前我正在通过添加来做到这一点 溢出:自动；

到

.horizontal [type=radio]:checked ~ label ~ .content

我考虑过将要滚动的文本和表单字段放在一个新的 DIV 中，并针对它设置 overflow:auto;，但它似乎没有用。

知道我该怎么做吗？

谢谢

Answer 1

/*
*
*    Author:    Michael Raffaele <michael@mraffaele.com>
*    Date:    25th October 2011
*    Info:     http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
*
*/

/* Shared for all accordion types */
.accordion {
    font-family:Arial, Helvetica, sans-serif; 
    margin:0 auto;
    font-size:14px;
    border:1px solid #542437;
    border-radius:10px;
    width:600px;
    padding:10px;
    background:#fff;
}
.accordion ul {
    list-style:none;
    margin:0;
    padding:0;    
}
.accordion li {
    margin:0;
    padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
    display:none;
}
.accordion label {
    display:block;
    font-size:16px;
    line-height:16px;
    background:#D95B43;
    border:1px solid #542437;
    color:#542437;
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    font-weight:700;
    cursor:pointer;
    text-transform:uppercase;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
    background:#C02942;
    color:#FFF;
    text-shadow:1px 1px 1px rgba(0,0,0,0.5)
}
.accordion .content {
    padding:0 10px;
    overflow:hidden;
    border:1px solid #fff; /* Make the border match the background so it fades in nicely */
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
}
.accordion p {
    color:#333;
    margin:0 0 10px;
}
.accordion h3 {
    color:#542437;
    padding:0;
    margin:10px 0;
}

/* Horizontal */
/* Unfortunately fixed heights need to be set for this */
.horizontal {
    overflow:hidden;
    height:300px;
}
.horizontal ul li {
    float:left;
    margin:0 1px 0 0;
}
.horizontal ul li label {
    word-wrap:break-word;
    letter-spacing:10px;
    text-align:center;
    height:280px;
    padding:10px 0 10px 5px;
    width:25px;
    float:left;
}
.horizontal ul li .content {
    height:300px;
    padding:0;
    display:inline-block; /* Makes its work in FF */
    visibility:hidden; /* Chrome bug cant show width < 1px for some reason so need to toggle visibility */
    width:1px;
    border-left:0;
    overflow:auto;
}
.horizontal [type=radio]:checked ~ label {
    border-right:0;    
}
.horizontal ul li label:hover {
    border:1px solid #542437; /* Again, we don't want the border to disappear on hover */
}
.horizontal [type=radio]:checked ~ label ~ .content {    
    visibility:visible;
    width:442px;
    padding:0 10px;
    border:1px solid #542437;
    border-left:0;    
}

<div class="accordion horizontal">
    <ul>
        <li>
            <input type="radio" id="vert-1" name="vert-accordion" checked="checked" />
            <label for="vert-1">Title&nbsp;One</label>
            <div class="content">
                <h3>This is an example accordion item</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-2" name="vert-accordion" />
            <label for="vert-2">Title&nbsp;Two</label>
            <div class="content">
                <h3>Totally another one right here</h3>
                <p>This should be static text and images that don't scroll. This should be static text and images that don't scroll. This should be static text and images that don't scroll. This should be static text and images that don't scroll.</p>
                
<h2> Only scroll from this point </h2>                
                <div style="overflow: auto;height: 120px;">
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
                </div>


            </div>
        </li>
        <li>
            <input type="radio" id="vert-3" name="vert-accordion" />
            <label for="vert-3">Title&nbsp;Three</label>
            <div class="content">
                <h3>I think I can go on forever</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
        <li>
            <input type="radio" id="vert-4" name="vert-accordion" />
            <label for="vert-4">Title&nbsp;Four</label>
            <div class="content">
                <h3>I was wrong, I'm done</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>
                <p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>
            </div>
        </li>
    </ul>
</div>