Question

基本上，theres 2 div默认打开，左边的一个总是在那里然后你有3个单选按钮。必须选择至少一个（不能单独使用“默认”列）。默认情况下，“default”div和“1”在那里，“2”和“3”是不可见的（display：none）。每个单选按钮都链接到特定的div，因此当单击时，jQuery将设置动画宽度以将选定的div与其他可见的div合并到整个div中。如何使用jQuery实现这一目标？

Picture＆lt; -----我有一个链接到我为了更好理解而制作的图片

Answer 1

jsFiddle：http://jsfiddle.net/K8TAS/90/

<input type="checkbox" value="1" checked disabled/>
<input type="checkbox" value="2"/>
<input type="checkbox" value="3"/>

<br/><br/>

<div style="height:200px;width:100px;float:left;background:yellow;" class="resizeDiv" id="div0">Default</div>
<div style="height:200px;width:100px;float:left;background:red;" class="resizeDiv" id="div1">1</div>
<div style="height:200px;width:100px;float:left;background:blue;display:none;" class="resizeDiv" id="div2">2</div>
<div style="height:200px;width:100px;float:left;background:green;display:none;" class="resizeDiv" id="div3">3</div>

<script>    
    $("input[type=checkbox]").click( function()
    {
        var amount = 2;

        $("input[type=checkbox]").each( function()
        {
            if ( $(this).val() != "1" )
            {
                if ( $(this).is(":checked") )
                {
                    $( "#div" + $(this).val() ).show();
                    amount++;
                }
                else
                {
                    $( "#div" + $(this).val() ).hide();
                }
            }
        });

        $(".resizeDiv").each( function()
        {
            $(this).width( 200 / amount );    
        });
    });
</script>

Div宽度根据选择的单选按钮大小调整

1 个答案: