尝试使用css和html创建水平折叠
尝试使用css和html创建水平折叠
提问于 2018-06-13 03:24:51
第一次在这里发帖，但我总是在这里找到有用的信息！
我正在建设一个网站，这需要一个水平的手风琴部分。我已经修改了sitepoint中的一个示例，它使用:target selection。
我想要的是3个相等的列的初始布局，在每个列的初始内容的短块。当点击链接时，初始内容被隐藏，目标部分扩展到90%，其他两个部分减少到5%。(我将在部分标题中添加一个90deg转换，并隐藏其他内容)。
目前，目标部分扩展到90%，但其他两个部分保持在33%，并在下面包装。有没有可能用这种方法修改‘targeted’部分？
请参阅JSFiddle
HTML
<article class="how-accordion" id="how">
<section id="acc1">
<h2><a href="#acc1">Shows hidden content</a></h2>
<p class="initial pt-5">Content to be hidden on click</p>
<p>This content appears on page 1.</p>
<a class="closedown" href="#how">Close</a>
</section>
<section id="acc2">
<h2><a href="#acc2">Show 2nd hidden section</a></h2>
<p class="initial pt-5">Content to be hidden on click</p>
<p>This content appears on page 2.</p>
<a class="closedown" href="#how">Close</a>
</section>
<section id="acc3">
<h2><a href="#acc3">Show 3rd hidden section</a></h2>
<p class="initial pt-5">Content to be hidden on click</p>
<p>This content appears on page 3.</p>
<a class="closedown" href="#how">Close</a>
</section>
</article>CSS
article.how-accordion {
display: block;
width: 100%;
margin: 0 auto;
background: yellow;
overflow: auto;
text-indent: 1em;
}
article.how-accordion section {
position: relative;
display: block;
float: left;
width: 33%;
height: 12em;
color: transparent;
background-color: transparent;
overflow: hidden;
border-radius: 3px;
}
article.how-accordion section h2 {
/* position: absolute;*/
font-size: 1em;
font-weight: bold;
width: 12em;
height: 2em;
/* top: 12em;*/
left: 0;
text-indent: 1em;
padding: 0;
margin: 0;
color: #ddd;
}
article.how-accordion section h2 a {
display: block;
width: 100%;
line-height: 2em;
text-decoration: none;
color: blue;
outline: 0 none;
}
.initial {
color: black;
}
article.how-accordion section:target .initial {
display: none;
}
.closedown {
color: transparent;
}
article.how-accordion section:target .closedown {
color: green;
}
article.how-accordion section:target {
width: 90%;
padding: 0 1em;
color: #333030;
background-color: red;
}
article.how-accordion section:target h2 {
position: static;
font-size: 1.3em;
text-indent: 0;
color: transparent;
}
article.how-accordion section,
article.how-accordion section h2 {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}任何帮助或相关文章(我正在努力学习以及解决问题)将非常感谢。
谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-13 03:56:53
如果你真的想避免使用javascript，你可以用flexbox来做一些事情，但是正如评论所暗示的那样，这并不是非常实用。更新的css：
article.how-accordion {
display: flex;
width: 100%;
margin: 0 auto;
background: yellow;
overflow: auto;
text-indent: 1em;
}
article.how-accordion section {
position: relative;
display: block;
float: left;
height: 12em;
color: transparent;
background-color: transparent;
overflow: hidden;
border-radius: 3px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 5%;
}
article.how-accordion section h2 {
/* position: absolute;*/
font-size: 1em;
font-weight: bold;
width: 12em;
height: 2em;
/* top: 12em;*/
left: 0;
text-indent: 1em;
padding: 0;
margin: 0;
color: #ddd;
}
article.how-accordion section h2 a {
display: block;
width: 100%;
line-height: 2em;
text-decoration: none;
color: blue;
outline: 0 none;
}
.initial {
color: black;
}
article.how-accordion section:target .initial {
display: none;
}
.closedown {
color: transparent;
}
article.how-accordion section:target .closedown {
color: green;
}
article.how-accordion section:target {
/* width: 90%; */
padding: 0 1em;
color: #333030;
background-color: red;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 90%;
}
article.how-accordion section:target h2 {
position: static;
font-size: 1.3em;
text-indent: 0;
color: transparent;
}
article.how-accordion section,
article.how-accordion section h2 {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50824435
复制相关文章
相似问题