jQuery 手风琴面板不会崩溃

Question

目标是让每个部分都以折叠状态开始。面板 0 和 2 都以折叠状态开始，但面板 1 不会以折叠状态开始，而是在单击时折叠。面板 1 使用一个 iframe，其中包含导入网站的实时 Twitter 提要。

以下代码示例：

HTML：

<div class="accordion">
    <div class="testimonials col-md-6 col-lg-6">
        <h1>section 1</h1>
        <p>this is a div</p>
    </div>
    <div class="social col-sm-6 col-md-3 col-lg-3">
        <h1>section 2</h1>
        <a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="999999">
            Tweets by @xxxxxx
        </a>
    </div>
    <div class="news col-sm-6 col-md-3 col-lg-3">
        <h1>section 3</h1>
        <p>this is a div</p>
    </div>

 the javascript

 <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
    </script>

 <script type="text/javascript">
        // <![CDATA[
        var $ = jQuery.noConflict(); $(document).ready(function()
        { 

            $(".accordion").accordion({
                active: false,
                collapsible: true,
                header: "h1"
            });

            //getter variables
            var active = $(".accordion").accordion("option","active");
            var collapsible = $(".accordion").accordion("option","collapsible");
            var header = $(".accordion").accordion("option","header");

            $('.carousel').carousel({ interval: 4000, cycle: true }); 
        }); // ]]>

Answer 1

我觉得你应该有这个表格

 <h3>Section 1</h3>
<div>
body 
</div>

正文是隐藏的，要访问它，您需要一个标题

Answer 2

我想通了。每个标题之后是包含内容的标签。如果你想让内容正确，你需要一个块级元素。之后，您可以使用 heightStyle 变量手动设置高度。 如果您遇到此问题，请确保标头的兄弟是块级元素。

例如

<div class="accordion">
<div class="testimonials col-md-6 col-lg-6">
    <h1>section 1</h1>
    <p>this is a div</p>
</div>
<div class="social col-sm-6 col-md-3 col-lg-3">
    <h1>section 2</h1>
    <div class="social-wrap">
         <a class="twitter-timeline" width="100%" data-chrome="transparent noscrollbar" href="https://twitter.com/xxxxxx" data-widget-id="999999">
        Tweets by @xxxxxx
         </a>
     </div>
</div>
<div class="news col-sm-6 col-md-3 col-lg-3">
    <h1>section 3</h1>
    <p>this is a div</p>
</div>

Answer 3

jQuery UI 手风琴插件不允许您折叠所有区域。根据定义，手风琴总是显示一个扩展区域。如果您希望能够折叠所有区域，那么您不想使用手风琴，而是想要创建可折叠区域。