在我的网页中，我有折叠和关闭的 Accordion 面板。我已经将页面高度设置为特定的。但是，我希望它从一开始就是特定的，但能够在我打开和关闭面板时展开，这样我就不必将页面设置得太长而没有内容。关于我如何去做这件事有什么想法吗？
这只是我用的例子，这也是目前高度偏小的原因。
我当前的代码:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta charset = "utf-8">
<title>London Tour Guide</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="jquery.js"></script>
<style>
div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
background-color: white; }
div.content {
width: 700px; height: 120px;
background-color: lightblue; padding: 5px; }
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
div.panel.show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class = "content">
<button class="accordion">Panel</button>
<div class="panel">
Hello
</div>
<button class="accordion">Panel 2</button>
<div class="panel">
Hello
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</div>
</body>
</html>
最佳答案
如果我没理解错的话，
您正在寻找 min-height:1300px 而不是 div.container 上的 height:1300px
关于javascript - 折叠 Accordion 面板时如何展开 HTML 网页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40468971/