Question

我在彩盒弹出窗口中有可折叠的内容。

我将宽度设置为“自动”，这适用于自动宽度，但自动高度怎么样？例如，当彩色框弹出时，它适合第一个图像，但是当我单击第二个可折叠图像的图像时，窗口不会调整大小。这可能吗？

HTML

<p><a class='inline' href="#inline_content"><img src="http://www.paycoservices.co.uk/images/find-scheme.png" alt="find your scheme" /></a></p>

<div style='display:none'>
        <div id='inline_content' style='padding:10px; background:#fff;'>
        <div class="two-step">
<a href="#"><img src="http://www.paycoservices.co.uk/images/2-step-sfinder.png" width="990" height="100"  class="show_hide" alt="3 steps" /></a>
</div>

<div class="slidingDiv">
<img src="http://www.paycoservices.co.uk/images/step1.png" width="60" height="58" class="show_hide" alt="step 1" />
<font color=white><strong><h3>I want my employment status to be:</h3></strong></font> <a href="#"  class="show_hide"></a>
<div id="question_1">
<a href="#"><img src="http://www.paycoservices.co.uk/images/umbrella-emp.png" style="margin-left:80px;" width="300" height="118" class="first_s"  alt="umbrella employee" />    </a>
<a href="#"><img src="http://www.paycoservices.co.uk/images/self-employed.png" style="margin-left:170px;" width="300"  height="118" class="second_s" alt="self employed" />   </a>
</div>
</div>
</div
</div>

JS

 $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".group1").colorbox({rel:'group1'});
                $(".group2").colorbox({rel:'group2', transition:"fade"});
                $(".group3").colorbox({rel:'group3', transition:"none",  width:"75%", height:"75%"});
                $(".group4").colorbox({rel:'group4', slideshow:true});
                $(".ajax").colorbox();
                $(".youtube").colorbox({iframe:true, innerWidth:640,  innerHeight:390});
                $(".vimeo").colorbox({iframe:true, innerWidth:500,  innerHeight:409});
                $(".iframe").colorbox({iframe:true, width:"80%",  height:"80%"});
                $(".inline").colorbox({inline:true, width:"auto"});
                $(".callbacks").colorbox({
                    onOpen:function(){ alert('onOpen: colorbox is about to  open'); },
                    onLoad:function(){ alert('onLoad: colorbox has started  to load the targeted content'); },
                    onComplete:function(){ alert('onComplete: colorbox has  displayed the loaded content'); },
                    onCleanup:function(){ alert('onCleanup: colorbox has  begun the close process'); },
                    onClosed:function(){ alert('onClosed: colorbox has  completely closed'); }
                });

                $('.non-retina').colorbox({rel:'group5', transition:'none'})
                $('.retina').colorbox({rel:'group5', transition:'none',  retinaImage:true, retinaUrl:true});

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function(){ 
                    $('#click').css({"background-color":"#f00",  "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still  be here.");
                    return false;
                });
    });

    $(document).ready(function(){

        // at first hide divs
        $(".slidingDiv").hide();
        $(".slidingDiv2").hide(); 
        $(".slidingDiv3").hide();
        $(".slidingDiv4").hide();
        $(".slidingDiv5").hide();
        $(".slidingDiv6").hide();
        $(".slidingDiv7").hide();
        $(".slidingDiv8").hide();
        $(".slidingDiv9").hide();
        $(".slidingDiv10").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
    $('.first_s').live('click', function(){
       $(".slidingDiv2").slideToggle();
    })
    $('.second_s').live('click', function(){
        $(".slidingDiv3").slideToggle();
    })  
    $('.third_s').live('click', function(){
        $(".slidingDiv4").slideToggle();
    }) 
    $('.fourth_s').live('click', function(){
        $(".slidingDiv5").slideToggle();
    }) 
    $('.fifth_s').live('click', function(){
        $(".slidingDiv6").slideToggle();
    })  
    $('.sixth_s').live('click', function(){
        $(".slidingDiv7").slideToggle();
    })  
    $('.seventh_s').live('click', function(){
        $(".slidingDiv8").slideToggle();
    })   
    $('.eighth_s').live('click', function(){
       $(".slidingDiv9").slideToggle();
    })   
    $('.ninth_s').live('click', function(){
        $(".slidingDiv10").slideToggle();
    }) 
    });

FIDDLE

Answer 1

看看这个完整的解决方案，它完美无缺。 =＆gt; FIDDLE (new)

此处，脚本会调整margin-top以使内容居中。

您可以使用<a goToStep="2">...</a>和<div step="2">...</div>显示多个步骤，并使用<a closeStep="2">...</a>隐藏其他多个步骤，这非常简单易用... 您可以同时执行所有操作<a goToStep="4,5" closeStep="1,3">...</a>

对于自适应颜色框，您可以使用maxWidth执行此操作：

$(".group1").colorbox({rel:'group1', maxWidth:'100%'});

一切都在小提琴中..

自动调整jquery颜色框高度

1 个答案: