jQuery在按钮单击时切换div宽度

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 px divSection有300 px，而divProducts有400px。 我想基于按钮切换屏幕单击显示divSectionInfo全角（800px）/半角（300px）宽度。

请帮我。

Answer 1

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

这是它的jQuery。

$('#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与工作示例

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