个人中心
gpt4 book ai didi

HTML CSS - Accordion 样式

转载 作者：太空宇宙 更新时间：2023-11-04 15:31:49 24 4
gpt4 key购买 nike

我正在尝试使用 HTML 和 CSS 创建 Accordion ，但遇到了一些问题:

演示: http://jsfiddle.net/MMFBz/

问题 1 - 每个标签都应该有一个 1px dashed #C5B7A6 border-top，第一个标签除外。当我创建一个 :first-of-type 或 :first-child 的伪元素时，它什么都不做......

  • 为什么第一个边框不会自行移除？

问题 2 - 一旦标签被选中/打开，它需要具有 #EF7C4D 的标题颜色。

  • 如何让标签在打开或选中后更改颜色，然后在关闭后变回白色？

问题 3 - 每篇文章中的文本应该有一个 opacity: 0，然后在打开时设置为 1。当我将它设置为 0 时，效果很好，但文本会淡入淡出一旦打开将无法使用。

  • 这怎么可能？

问题 4 - 每篇文章都应自动设置一个高度，由内容量决定。如果我删除 height: 150px; 我会失去过渡效果(逐渐向下滑动以打开)。

  • 关于如何在不使用固定高度的情况下以同样的效果工作，有什么想法吗？

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Accordion with CSS3</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <div id="container">
            <section class="ac-container">
                <div>
                    <input id="ac-1" name="accordion-1" type="checkbox" checked />
                    <label for="ac-1">Label One</label>
                    <article>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius arcu lectus, sit amet tempus nibh. Integer quis eros sed dui varius luctus in non ipsum. Proin congue, nibh nec rhoncus fermentum, ipsum magna imperdiet libero, id viverra lorem nisi ac ante. Integer eu tortor ac nunc pulvinar fermentum vel vulputate enim. Curabitur id diam urna. Vestibulum venenatis malesuada mauris, rhoncus ullamcorper tortor dictum vel. Fusce luctus metus id felis ultricies lacinia. Praesent luctus varius augue, id consectetur eros iaculis sit amet. Fusce tempor dolor ut leo tempus sit amet ornare eros cursus. Nulla dui dolor, posuere vel vestibulum ac, sollicitudin sed enim. Mauris ac vestibulum enim. Vivamus nulla nulla, tincidunt ut elementum quis, posuere eget velit. Nullam placerat blandit cursus. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-2" name="accordion-1" type="checkbox" />
                    <label for="ac-2">Label Two</label>
                    <article>
                        <p>Vestibulum viverra, nisl in aliquet malesuada, ipsum tellus cursus nibh, et pellentesque lorem quam eu arcu. Vivamus ultricies gravida aliquam. Maecenas quis est lectus, in laoreet mi. Pellentesque eleifend nunc ac mi tempus laoreet. Maecenas sit amet nisi massa, ac laoreet arcu. Curabitur accumsan auctor adipiscing. Curabitur lacinia molestie nisi, sit amet sollicitudin neque aliquet eu. In lacus nisi, porttitor nec euismod sed, hendrerit sed eros. Integer eu felis velit, a vulputate mauris. Etiam dui magna, convallis vel tristique non, pharetra eu erat. Duis suscipit lectus quis elit volutpat sit amet semper elit dapibus. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-3" name="accordion-1" type="checkbox" />
                    <label for="ac-3">Label Three</label>
                    <article>
                        <p>Maecenas vitae mattis dolor. Cras sit amet elit ac mi facilisis iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sollicitudin scelerisque justo eu bibendum. Nam ac odio tellus. Suspendisse tristique lectus vel mi tristique tristique. Morbi sed auctor libero. Aliquam sagittis vestibulum felis, ut varius tellus venenatis vitae. Donec ac nisi sem, et imperdiet nulla. Mauris vel nulla justo, in volutpat libero. Fusce vestibulum rutrum nibh vel scelerisque. Curabitur viverra libero nec enim adipiscing et venenatis ante auctor.</p>
                    </article>
                </div>

                <div>
                    <input id="ac-4" name="accordion-1" type="checkbox" />
                    <label for="ac-4">Label Four</label>
                    <article>
                        <p>Phasellus lobortis sapien et risus imperdiet tempor. Integer vestibulum ligula a velit eleifend rutrum. Nam erat magna, lacinia quis porta tempus, vulputate ac odio. Praesent vel mi vel purus malesuada convallis. Sed tincidunt euismod tortor. Mauris leo nibh, semper nec sodales sit amet, faucibus vel nunc. Morbi quis nibh quis diam semper blandit. Fusce vitae viverra sem. Phasellus tempor nunc in urna eleifend fermentum varius felis pretium. Mauris convallis felis vel massa vehicula ut ullamcorper est imperdiet. In orci leo, ullamcorper in varius a, aliquam id libero. Nam urna metus, dignissim sit amet egestas eu, sollicitudin ac lorem. Fusce ac libero sem, nec porttitor dui.</p>
                    </article>
                </div>

                <div>
                    <input id="ac-5" name="accordion-1" type="checkbox" />
                    <label for="ac-5">Label Five</label>
                    <article>
                        <p>Duis lectus tortor, malesuada vel viverra in, aliquam nec metus. Cras euismod enim et enim lacinia eleifend. Nunc ornare, mauris eleifend scelerisque suscipit, metus lorem rhoncus est, in porttitor mi ipsum at erat. Phasellus fermentum elit et purus tincidunt vel bibendum enim tincidunt. Etiam posuere risus id dolor volutpat nec auctor risus aliquet. Sed ac erat porttitor odio interdum venenatis et at arcu. Aenean quis massa ut sem tincidunt suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In pellentesque, lorem vitae ultrices posuere, elit nibh tincidunt nibh, nec lacinia diam sapien eu mauris. Sed euismod risus non libero imperdiet in fermentum elit vehicula. Vestibulum orci mi, sodales eu pellentesque at, ornare eu ipsum. Phasellus eget dolor ipsum, varius rhoncus turpis. Donec consectetur convallis ornare. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-6" name="accordion-1" type="checkbox" />
                    <label for="ac-6">Label Six</label>
                    <article>
                        <p>Nullam hendrerit varius risus in vestibulum. Integer mattis gravida arcu, ut bibendum leo sagittis eget. In consectetur lorem adipiscing sem tincidunt placerat. Vestibulum sit amet lacus ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet justo dui, id consectetur ipsum. Ut hendrerit convallis nunc, eu mollis nulla ornare dapibus. Proin quam nulla, mollis eget laoreet ut, blandit id velit. Curabitur a odio risus, a cursus tortor. Aliquam erat volutpat. Vivamus eros odio, semper vel volutpat vel, commodo in eros. Sed porttitor malesuada nisi sed mattis. Etiam feugiat consequat rutrum. Sed in mi nunc, ornare tristique erat. Vestibulum a ligula dui. </p>
                    </article>
                </div>

                <div>
                    <input id="ac-7" name="accordion-1" type="checkbox" />
                    <label for="ac-7">Label Seven</label>
                    <article>
                        <p>Nullam elit ipsum, blandit nec dictum hendrerit, rutrum vitae ante. Sed accumsan porttitor placerat. Nullam feugiat congue rutrum. Morbi at quam eu mauris egestas dictum eget id odio. Maecenas sed turpis non nunc dapibus placerat. Vestibulum mattis auctor risus, in fringilla erat venenatis quis. Fusce posuere congue massa, sed semper odio iaculis porttitor.</p>
                    </article>
                </div>

                <div>
                    <input id="ac-8" name="accordion-1" type="checkbox" />
                    <label for="ac-8">label Eight</label>
                    <article>
                        <p>Integer quis lectus nec tellus egestas volutpat commodo bibendum massa. Phasellus iaculis iaculis magna, et semper nunc mattis quis. Praesent dictum, quam id sodales ornare, erat nibh dapibus nibh, eget porttitor dui sem et erat. Praesent lobortis vulputate nulla, nec sagittis justo ultrices eu. Sed at consectetur lacus. Cras molestie dictum lorem, ut tincidunt magna malesuada in. Praesent posuere mi eget justo mattis hendrerit. Proin vitae quam justo. Donec consequat mauris sed dui eleifend vitae dictum risus faucibus. Curabitur gravida consequat mi, ut hendrerit metus laoreet sed. Cras in justo quis neque hendrerit cursus ac vel eros. Sed pretium, lectus sed tempus lacinia, ipsum sapien dapibus elit, quis sodales nisl tortor quis sem. Donec aliquam nibh eget tellus ornare porta. Phasellus bibendum diam et mi pulvinar pellentesque.</p>
                    </article>
                </div>
            </section> <!-- .ac-container -->
        </div> <!-- #container -->
    </body>
</html>

CSS

body {
    background: #202024;
    color: #FFF;
    font: .75em Arial, Helvetica, sans-serif;
}
#container {
    width: 500px;
    margin: 0 auto;
}
#container label {
    font: 1.75em 'Oswald', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFF;
    padding: 5px 0;
    position: relative;
    z-index: 20;
    display: block;
    cursor: pointer;

    border-top: 1px dashed #C5B7A6; /* ------- Problem 1 ------- */

    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    -ms-transition: color 0.5s ease-in-out;
    transition: color 0.5s ease-in-out;
}
.ac-container label:first-of-type,
.ac-container label:first-child {
    border: none; /* ------- Problem 1 ------- */
}
.ac-container label:hover {color: #EF7C4D;}
.ac-container label:checked {
    color: #EF7C4D; /* ------- Problem 2 ------- */
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 0;
    top: 7px;
    background: transparent url(http://i.stack.imgur.com/l3caj.png) no-repeat center center;    
}
.ac-container input:checked + label:hover:after {background-image: url(http://i.stack.imgur.com/CnUMt.png);}
.ac-container input {display: none;}
.ac-container article{
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;

    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}
.ac-container article p {
    padding: 5px;
/*  opacity: 0; /* ------- Problem 3 ------- */
}
.ac-container input:checked ~ article {
    height: 150px; /* ------- Problem 4 ------- */

    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    -ms-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}
.ac-container input:checked {height: auto;}

最佳答案

问题 1:因为 label 不是 ac-container 的子项。如果您将顶部边框放在 div 上，它就会起作用。

问题 2:选择器应该是 .ac-container input[type='checkbox']:checked + label，因为标签本身没有被选中。标签的颜色也将被默认颜色覆盖，因此请尝试放置 !important 以查看其工作原理。

问题3:我是这样说的:

.ac-container input:checked ~ article {
    opacity: 1;

    -webkit-transition: opacity,height 0.5s,0.5s ease-in-out;
    -moz-transition: opacity,height 0.5s,0.5s ease-in-out;
    -o-transition: opacity,height 0.5s,0.5s ease-in-out;
    -ms-transition: opacity,height 0.5s,0.5s ease-in-out;
    transition: opacity,height 0.5s,0.5s ease-in-out;
}

.ac-container article{
    opacity:0;

    -webkit-transition: opacity,height 0.3s,0.3s ease-in-out;
    -moz-transition: opacity,height 0.3s,0.3s ease-in-out;
    -o-transition: opacity,height 0.3s,0.3s ease-in-out;
    -ms-transition: opacity,height 0.3s,0.3s ease-in-out;
    transition: opacity,height 0.3s,0.3s ease-in-out;


}

问题 4:似乎您需要指定高度，除非您使用 javascript:similar question

关于HTML CSS - Accordion 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13285788/

24 4 0
文章推荐： php - <!--[if lte IE8]>< ![endif]--> 出现在网站和下拉问题上
文章推荐： c++ - 内置 CArray 的 CMap
文章推荐： c++ - C++ 中编译器优化的影响
文章推荐： html - 为什么我无法在 Firefox 中将下拉列表的文本居中对齐？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com