锚标记将目标内容放置在屏幕顶部。我需要通过使屏幕和内容保持原位而不是跳跃来找到解决这个问题的方法。
的CSS
/* -- >> accordion box << -- */
.accordion {
width:640px;
overflow:hidden;
margin:10px;
color:#FFF;
padding:10px;
position: relative;
}
/* -- >> accordian head styles << -- */
/* -- >> Set style of open slide << -- */
.accordion section:target {
background:rgba(0,0,0,0.7);
padding-top: 1em;
padding-right: 1em;
padding-bottom: 2em;
padding-left: 1em;
}
.accordion section:target:hover {
background:rgba(0,0,0,0.7);
}
.accordion section:target h2 {
width:100%;
}
.accordion section:target h2 a {
color:#CCC;
padding:0;
}
.accordion section:target p {
display:block;
}
.accordion section h2 a {
padding:8px 10px;
display:block;
font-size:16px;
font-weight:normal;
color:#FFF;
text-decoration:none;
}
/* -- >> set style of closed slide << -- */
.accordion section {
float:left;
overflow:hidden;
color:#FFF;
cursor:pointer;
background:rgba(0,0,0,0.0);
margin:3px;
padding-bottom: 5px;
}
.accordion section:hover {
background:rgba(0,0,0,0.7);
}
.accordion section p {
display:none;
}
.accordion section:after {
position:relative;
font-size:24px;
color:#FFF;
font-weight:bold;
}
.accordion section:nth-child(1):after {
content:'';
}
.accordion section:nth-child(2):after {
content:'';
}
.accordion section:nth-child(3):after {
content:'';
}
.accordion section:nth-child(4):after {
content:'';
}
.accordion section:nth-child(5):after {
content:'';
}
/* -- >> Vertical << -- */
.vertical section {
width:100%;
height:40px;
-webkit-transition:height 0.2s ease-out;
-moz-transition:height 0.2s ease-out;
-o-transition:height 0.2s ease-out;
-ms-transition:height 0.2s ease-out;
transition:height 0.2s ease-out;
}
/* -- >> Set height of the slide << -- */
.vertical :target {
height:250px;
width:97%;
}
.vertical section h2 {
position:relative;
left:0;
top:-15px;
}
/* -- >> Set position of the number on the slide << -- */
.vertical section:after {
top:-60px;
left:810px;
}
.vertical section:target:after {
left:-9999px;
}
HTML
<div class="accordion vertical">
<section id="vertone">
<h2><a href="#vertone">About Us</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.<br/></p>
</section>
<section id="verttwo">
<h2><a href="#verttwo">Services</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.<br/></p>
</section>
<section id="vertthree">
<h2><a href="#vertthree">Blog</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.<br/></p>
</section>
<section id="vertfour">
<h2><a href="#vertfour">Portfolio</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.<br/></p>
</section>
<section id="vertfive">
<h2><a href="#vertfive">Contact</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.<br/></p>
</section>
</div>
JS FIDDLE 手风琴如何运作的基本示例。另外，还有一种方法可以通过再次点击它们来关闭这些部分吗？