2

修繕

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 は非表示)

今、左の 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');"/>

誰かが助けてくれることを願っています:)

4

1 に答える 1

2

もしかして、これのことですか？デモ

$(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%");
        });
    });
});
于 2012-06-13T13:26:56.330 に答える