Question

您好我想用div分割我的页面显示。下面是我的HTML代码。

<div id="wrapper">
        <div id="divSectionInfo">
        </div>
        <input type="button" value="Toggle screen" class="btn" id="btnSlide">
        <div id="divProducts">                

        </div>
    </div>

div包装器有800像素 divSection有300像素，divProducts有400像素。我想根据按钮切换屏幕点击显示divSectionInfo全宽（800px）/半（300px）宽度。

请帮我解决这个问题。

Answer 1

您可以使用简单的.toggleClass()解决问题。

这是jQuery for it。

$('#btnSlide').on('click',function(){
$('#divSectionInfo').toggleClass('width800');
});

创建一个名为width800的css类，其中包含以下内容。

.width800{
width: 800px !important;
}

这是一个相同的jsFiddle。

http://jsfiddle.net/rison/epkdjmz5/

Answer 2

这很简单，用jQuery检查当前宽度是多少，并将宽度设置为另一个值。

$("#btnSlide").on("click", function(){
    var div = $("#divSectionInfo");
    var width = (div.width() === 800 ) ? "300" : "800";
    div.css("width", width);
});

JSfiddle with working example

检查按钮是否单击
将div保存到变量（以获得更好的性能）
检查宽度是否等于800：
true - 将var width设置为300
false - 将var width设置为800
将div的CSS设置为宽度变量

单击按钮时，Jquery切换div宽度

2 个答案: