javascript - jQuery颜色框调整大小

Question

我正在使用 jQuery 插件 ColorBox。

我的文件里面有使用 jquery hide & slideToggle。

单击并滑动隐藏的 div 时，我需要更改颜色框的高度。

我试过colorbox resize或$("#ajax_container").height($("#a").height());

两者都不起作用，有什么办法可以做到这一点？

<script>
    $(document).ready(function(){
        $("#a").hide();

        $("#click_a").click(function(){
            $("#a").slideToggle(200);
            $.colorbox.resize();
        });
    });
</script>

<style>
    #ajax_container {
        width:680px;
        min-height:400px;
        overflow:hidden;
        background:white;
    }
    #a {
        width:500px;
        height:5500px;
        background:red;
        margin-bottom:50px;
    }
</style>

<div id="ajax_container">
    <a id="click_a" href="#">Click me</a>
    <div id="a"></div>
</div>

Answer 1

$.colorbox.resize({height: 6000});

将其添加到其中，应该可以工作。

Answer 2

jQuery( document ).ready( function(){
    var custom_timeout = ( function() {
        var timers = {};
        return function ( callback, ms, uniqueId ) {
            if ( !uniqueId ) {
                uniqueId = "Don't call this twice without a uniqueId";
            }
            if ( timers[uniqueId] ) {
                clearTimeout ( timers[uniqueId] );
            }
            timers[uniqueId] = setTimeout( callback, ms );
          };
    })(); 
    $(".group1").colorbox({rel:'group1', width:"80%" }); 
    $( window ).resize( function(){
        custom_timeout(function(){
            if( $('#cboxOverlay' ).css( 'visibility' ) ){
                $(".group1").colorbox.resize({ innerWidth:'80%' });
            }
        }, 500 );
    }); 
});