javascript，当div div被隐藏时div div必须是100％宽度 [英] javascript, When right div is hidden left div has to be 100% width

问题描述

$ b 通过编辑mplungjan的代码来修正它：

 <$ c $ （$（this）.is（'：checked'））$（function）（）{
 $（＃foo）。 （'＃checked-a'）。show（'fast'，function（）{
 $（'＃checked-b'）.css（width，60％）; 
 $ （'＃checked-a'）.css（width，40％）; 
}）; 
 else $（'＃checked-a'）。show（'fast'，function （）{
 $（'＃checked-b'）.css（width，100％）。show（）; 
 $（'＃checked-a'）。css（宽度，0％）。hide（）; 
 
}）; 
}）; 
}）; 
  

我想让左边div为100％（当前60％）right div 40％）隐藏。

截图与复选框：

带有未勾选复选框的屏幕截图：

现在我想让左div覆盖整个页面宽度（ 100％）。

这里是我的代码：

javascript：

 < script type =text / javascript> 
 $（'（'：checked'））
 $（'＃checked-a'）
（$（'input [name =foo]'）。 .slideDown（'fast'）; 
}）; 
< / script> 
  

div：

 < div class =content2id =checked-a> 
<％= yield％> 
< / div> 
  

html输入：

 < input type =checkboxchecked =checkedname =foovalue =1onclick =$（this）.is（'：checked'）&& $（ '＃checked-a'）。slideDown（'fast'）|| $（'＃checked-a'）。slideUp（'fast'）;/> 
  

希望有人可以帮忙：）

解决方案

也许你的意思是？ DEMO

 <$ c （）（$（this）.is（'：checked'））（）函数（）{
 $（＃foo）。 $（'＃checked-a'）.css（width，40％）; 
（'＃checked-a'）。 $（'＃checked-b'）。show（）; 
}）; 
 else $（'＃checked-b'）。slideUp（'fast'，function（）{
 $（'＃checked-a'）.css（width，100％）; 
}）; 
}）; 
}）; 
  

FIXED

fixed it by editing mplungjan's code to this:

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","40%");
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();

        });
    });
});

i would like to have the left div to be 100% (current 60%) when right div (40%) is hidden.

screenshot with checked checkbox:

screenshot with unchecked checkbox:

now i would like to make the left div cover the whole width of the page (100%).

here is my code:

javascript:

      <script type="text/javascript">
    $(function(){
    ($('input[name = "foo"]').is(':checked'))
    $('#checked-a').slideDown('fast');
    });
  </script>

div:

    <div class="content2" id="checked-a">
    <%= yield %>
</div>

html input:

<input type="checkbox" checked="checked" name="foo" value="1" onclick="$(this).is(':checked') && $('#checked-a').slideDown('fast') || $('#checked-a').slideUp('fast');"/>

hope someone could help :)

解决方案

Perhaps you mean this? DEMO

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').slideDown('fast',function() {
            $('#checked-a').css("width","40%");
            $('#checked-b').show();
        }) ;
        else $('#checked-b').slideUp('fast',function(){
           $('#checked-a').css("width","100%");
        });
    });
});

这篇关于javascript，当div div被隐藏时div div必须是100％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！