2

ボタンで div の幅を切り替えようとしています。

望ましい効果は、「大」をクリックして div の幅を 100% にし、ボタンに「小」と表示して div を 50% に縮小することです。

実際の例 - JS Fiddle

HTML

<div class="block">
    block 50%
</div>
<button>Big</button>

CSS

.block {
    background: green;
    width: 50%;
    height: 300px;
    float: left;
    display: block;
    color: white;
}
button {
    clear: both;
    float: left;
    margin-top: 30px;
}
4

3 に答える 3

4

これを試して

$(document).ready(
$('#resize').click(function(){
    var value = $(this).html();
    if(value=='Big'){
        $(this).html('Small'); 
        $('div').css('width',"100%");
    }else{
    $(this).html('Big');
    $('div').css('width',"50%");
    }

})
)

http://jsfiddle.net/tvXyL/6/

于 2013-08-18T20:44:20.447 に答える
0

このジョブには JavaScript を使用する必要があります。私が見るところ、あなたはjQueryを使用しているので（タグ付けしたとおり）、これがうまくいくかもしれません：

// Give the button a default state
$('button').attr('data-state', 'expand');

$('button').click(function () {
    // When clicked

    if ($(this).attr('data-state') === 'expand') {

        // If it's in "expand" status, expand the div
        $('.block').css('width', '100%');
        $(this).text('Small').attr('data-state', 'compress');
    } else if ($(this).attr('data-state') === 'compress') {

        // If it's in "compress" state, compress the div
        $('.block').css('width', '50%');
        $(this).text('Big').attr('data-state', 'expand');
    }
});

JSFiddle。

于 2013-08-18T20:41:53.427 に答える
0

この jQuery を追加して、単純にクラスを切り替えます。

jQuery

$('button').on('click', function(event) {
    if($('.block').hasClass('expand') == false) {
        $('.block').addClass('expand');
        $(this).text('Small');
    } else {
        $('.block').removeClass('expand');
        $(this).text('Big');
    }
});

CSS に .expand クラスを追加します。

CSS

.block.expand {
    width: 100%;
}

JSfiddle はこちら: http://jsfiddle.net/RyN7d/1/

于 2013-08-18T20:47:44.643 に答える