javascript，当右边的div被隐藏时，左边的div必须是100%宽度

Question

固定

通过将 mplungjan 的代码编辑为以下内容来修复它:

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

        });
    });
});

当隐藏右侧 div (40%) 时，我希望左侧 div 为 100%(当前为 60%)。

选中复选框的屏幕截图:

未选中复选框的屏幕截图:

现在我想让左边的 div 覆盖页面的整个宽度 (100%)。

这是我的代码:

JavaScript:

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

分区:

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

html 输入:

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

希望有人能帮忙:)

Answer 1

也许你是这个意思？ 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%");
        });
    });
});