我似乎无法做到这一点，需要有人查看我的代码。我需要FAQ手风琴的响应。当它第一次加载折叠时，它将打开的空间都是空白的。我需要它响应迅速，并在打开时腾出更多空间。此外，当它打开时，它只有足够的空间来阅读问题。当您打开答案的最后一个问题时，它看起来没有打开，但您必须向下滚动才能看到它。我需要这个来响应。
我正在使用iframe将其嵌入到网站上。这是 iframe：
<p align="center"><iframe width="90%" height="450" align="center" src="https://mdbootstrap.com/api/snippets/embed/2166736/fullscreen" frameborder="0" scrolling="yes" onload="resizeIframe(this)"></iframe></p>
链接到片段： 手风琴 V5
<!DOCTYPE html>
<html>
<head>
<title>ILCA Accordion</title>
</head>
<body>
<div class="accordion" id="accordionExample275" aria-multiselectable="true">
<div class="card z-depth-0">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-1">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target=".multi-collapse"
aria-expanded="false" aria-controls="collapseOne2 collapseOne3" data-parent="accordionExample275" style="font-size:20px" >
<p id="text">Still Have More Questions? We Have More Answers.</p>
<div class="center">
<button class="button1 button1" type="button" data-toggle="collapse" id="collapseOne1" data-target=".multi-collapse"
aria-expanded="false" aria-controls="collapseOne2 collapseOne3">View FAQ</button>
</div>
</button>
</h5>
</div>
<h5>
<div class="collapse multi-collapse" >
<button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne2" data-target="#collapseOne3"
aria-expanded="true" aria-controls="collapseOne3" style="font-size:20px">
What is your vision?
</button>
</div>
</h5>
<div class="collapse multi-collapse">
<div id="collapseOne3" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">
<div class="card-body" style="font-size:20px">
World health transformed through breastfeeding and skilled lactation care.
</div>
</div>
</div>
<h5>
<div class="collapse multi-collapse" >
<button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne4" data-target="#collapseOne5"
aria-expanded="true" aria-controls="collapseOne5" style="font-size:20px">
What is your vision?
</button>
</div>
</h5>
<div class="collapse multi-collapse">
<div id="collapseOne5" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">
<div class="card-body" style="font-size:20px">
World health transformed through breastfeeding and skilled lactation care.
</div>
</div>
<h5>
<div class="collapse multi-collapse" >
<button class="btn1 btn-link" role="tab" type="button" data-toggle="collapse" id="collapseOne6" data-target="#collapseOne7"
aria-expanded="true" aria-controls="collapseOne7" style="font-size:20px">
What is your vision?
</button>
</div>
</h5>
<div class="collapse multi-collapse">
<div id="collapseOne7" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample275" data-toggle="collapse" role="tabpanel">
<div class="card-body" style="font-size:20px">
World health transformed through breastfeeding and skilled lactation care.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.button1 {
background-color: #ffffff; /* White */
border: none;
color: black;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
padding: 1% 10%;
cursor: pointer;
margin: 0;
position: absolute;
top: 70%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.center {
margin: 0;
position: static;
top: 65%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.text {
align-content: center;
padding: 10 10 10 10;
}
.card-header {
background-color:#ffffff;
}
.btn {
width:100%;
height:150px;
text-align: center;
background-color: #3f516c;
color: #ffffff;
border-width: 0px;
border: none;
border-style: none;
align-content: center;
}
.btn:visited {
width:100%;
height:150px;
text-align: center;
background-color: #3f516c;
color: #ffffff;
border-width: 0px;
border: none;
border-style: none;
align-content: center;
}
.btn:focus {
width:100%;
height:150px;
text-align: center;
background-color: #3f516c;
color: #ffffff;
border-width: 0px;
border: none;
border-style: none;
align-content: center;
}
.btn:hover {
width:100%;
height:150px;
text-align: center;
background-color: #3f516c;
color: #ffffff;
border-width: 0px;
border: none;
border-style: none;
align-content: center;
}
.btn:active {
width:100%;
height:150px;
text-align: center;
background-color: #3f516c;
color: #ffffff;
border-width: 0px;
border: none;
border-style: none;
align-content: center;
}
p:hover {
opacity:1.0;
box-shadow:none;
}
.btn1 {
width:100%;
height:80px;
padding-top: 10px;
padding-bottom: 100px
padding-left: 20px
padding-bottom: 15px;
text-align: left;
border-width: 0px;
border-bottom: 1px solid black;
text-decoration: none;
}
.btn1, .btn1:hover, .btn1:active, .btn1:visited, .btn1:focus {
text-decoration:none;
}
#collapseOne3 {border-bottom: 1px solid black;text-align: left; padding-left: auto}
#collapseOne5 {border-bottom: 1px solid black;text-align: left; padding-left: auto}
#collapseOne7 {border-bottom: 1px solid black;text-align: left; padding-left: auto}
#collapseOne2 {
position: relative;
left: 10px;
}
#collapseOne4 {
position: relative;
left: 10px;
}
#collapseOne6 {
position: relative;
left: 10px;
}
.headingOne {
height: auto;
overflow: hidden;
}
我用Java找到了答案。代码如下。
*创建 iFrame 的 Java 脚本
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript'>
// Size the parent iFrame
function iframeResize() {
var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
parent.postMessage("resize::"+height,"*");
}
$(document).ready(function() {
// Resize iframe
setInterval(iframeResize, 1000);
});
</script>
*用于 iFrame 插入的 Java 脚本
<p align="center"><iframe width="80%" scrolling="no" src='https://mdbootstrap.com/api/snippets/embed/2166736/fullscreen' id='edh-iframe'></iframe></p>
<script type='text/javascript'>
// Listen for messages sent from the iFrame
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
// If the message is a resize frame request
if (e.data.indexOf('resize::') != -1) {
var height = e.data.replace('resize::', '');
document.getElementById('edh-iframe').style.height = height+'px';
}
} ,false);
</script>