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 像素 div部分有 300 像素，div产品有 400 像素。我想根据按钮切换屏幕点击显示 divSectionInfo 全宽 (800px)/半宽 (300px)。

请帮我解决这个问题。

Answer 1

很简单，用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 宽度设置为 300
false - 将 var 宽度设置为 800
设置div的CSS为宽度变量

Answer 2

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

这是它的 jQuery。

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

并创建一个名为 width800 的 css class，内容如下。

.width800{
width: 800px !important;
}

这是相同的 jsFiddle。

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

Jquery 在按钮点击时切换 div 宽度

Jquery toggle div width on button click

html

jquery

jquery-ui

slidetoggle

jquery-animate