jquery - Accordion div 外的 Accordion 内容

Question

出于某种原因， Accordion 中的内容出现在它应该出现的位置之外。我希望 div 自动适合其中的内容，我认为当您未指定高度时应该发生这种情况？

发生了什么:

HTML:

<div id="accordion">
        <h3>13/08/2015, 12:00, Company</h3>
            <div>
                <p>Date: 13/08/2015<br>
                Start time: 12:00<br>
                End time: 19:00<br>
                Allocated break period: 15:00 - 15:30<br> 
                Assigned by: Manager name<br>
                Company: Company<br>
                    <button type="button" class="confirm">Confirm</button>
                    <button type="button" class="cancel">Cancel</button>
                    <button type="button">Submit</button>
                </p>
            </div>     
            <h3>shift2</h3>            
            <div>
            <p>This is the second sentence.</p>
            </div>
            <h3>shift3</h3>
            <div>
            <p>This is the third sentence.</p>
            </div>
    </div>

CSS

#accordion{
    background-color: #8f8f8f;
    color:#ffffff;
    min-width:98%;
    margin: 1%;

}

#accordion div{
    background-color: #f2f2f2;
    color:#000000;
}

#accordion h3{
    padding-left:1%;
    cursor:pointer;
}

此外，我希望在按下取消按钮以包含表单时进一步拉伸(stretch) div，这将如何完成？

Answer 1

您的 CSS 中的按钮一定包含错误。您的代码正在运行。看这里:Working jsfiddle

关于您的第二个问题:如果您将表单放入其中，Div 会自动拉伸(stretch)。示例:

//find div
var form=document.getElementById("accordion");

//create new div
var div=document.createElement('div');

//add text to div
div.appendChild(document.createTextNode("New Content"));

//append new div to div
form.appendChild(div);