jQuery選項卡：用於擴展內容的autoHeight

Question

我正在從此SITE使用jquery滑動選項卡，效果很好。 唯一的問題是autoHeight jquery函數無法適應擴展內容。 改寫：選項卡容器將調整為不活動內容的高度，但問題是，一旦容器內的內容變為活動並垂直擴展，它將不再適合且看不到<---無法對其進行調整。 這是示例JSFFIDLE

我嘗試這樣做以調整高度以擴展內容，但是它不起作用：

<script>
 var height = 50 // Set to the height you want
        $('.st_view').css('height', height+'px')

    });​

    </script>

整體jQuery

 <script>

    $(document).ready(function() {

        $('div#st_horizontal').slideTabs({
            // Options              
            contentAnim: 'slideH',
            autoHeight: true,
            contentAnimTime: 600,
            contentEasing: 'easeInOutExpo',
            tabsAnimTime: 300
        });

        var height = 50 // Set to the height you want
        $('.st_view').css('height', height+'px')

    });​

    </script>

Answer 1

如果只有切換器會導致內容擴展，則可以按以下方式修改切換器代碼：

$('#title').click(function() {
    $(this).toggleClass('active');
    $('#content').toggle();
    var $tab = $(this).closest('.st_tab_view');
    $tab.closest('.st_view').css('height', $tab.height());
});

有關更通用的解決方案，請獲取jQuery resize插件 ，然后添加以下代碼：

$('.st_tab_view').resize(function() {
    var $this = $(this);
    $this.closest('.st_view').css('height', $this.height());
});