Question

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

下面的代码示例：

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手风琴插件不允许您折叠所有区域。根据定义，手风琴总是显示一个扩展区域。如果您希望能够折叠所有区域，那么您不想使用手风琴，则需要创建可折叠区域。

jQuery手风琴面板不会崩溃

3 个答案: