我希望上面的代码应该在我的网站上有下拉切换效果.
默认情况下,当观众刷新页面时,第一个框必须显示下拉框,当单击下一个框时,前面的下拉框应隐藏自身.
怎么做？
.maindrop {
width: 49%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
margin-bottom: .1cm;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .5s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}<div class="maindrop" style="float: right">
<div class="fold default">
<a class="bar" href="#tab5">Speaker 5</a>
<div class="dropbox" id='tab5'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab6"> Speaker 6</a>
<div class="dropbox" id='tab6'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab7"> Speaker 7</a>
<div class="dropbox" id='tab7'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab8"> Speaker 8</a>
<div class="dropbox" id='tab8'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
</div>
Shi*_*ndi -1
尝试 bootstrap -accordian..
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>