1

我在颜色框弹出窗口中有可折叠的内容。

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

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();
    }) 
    });

小提琴

4

1 回答 1

0

看看这个完整的解决方案，它工作得很好。=> 小提琴（新）

在这里，一个脚本调整 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%'});

一切尽在掌握之中。。

于 2013-07-11T15:53:40.217 回答