jquery - 通过单击按钮更改元素 CSS 样式

Question

我正在尝试使用按钮切换 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;
}

Answer 1

尝试这个

$(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/

Answer 2

您需要使用 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');
    }
});

JSF 中。

Answer 3

添加这个 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');
    }
});

将 .expand 类添加到您的 CSS。

CSS

.block.expand {
    width: 100%;
}

JSfiddle在这里：http: //jsfiddle.net/RyN7d/1/