Jquery在按钮单击时切换div宽度答案

【问题标题】：Jquery toggle div width on button clickJquery在按钮单击时切换div宽度
【发布时间】：2015-05-09 12:00:15
【问题描述】：

您好，我想用 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）宽。

请帮帮我。

【问题讨论】：

标签： jquery html jquery-ui jquery-animate slidetoggle

【解决方案1】：

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

这里是它的 jQuery。

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

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

.width800{
width: 800px !important;
}

这是一个同样的 jsFiddle。

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

【讨论】：

嗨，Rison，非常感谢。但我的情况是 div 水平放置在单行中。所以必须隐藏 div 产品才能显示宽度为 800px 的 divsection。我希望你知道我的意思..
@sandeep.mishra 在这种情况下，在click 函数中添加$('#divProducts').toggle();。这是更新的 jsFiddle 来帮助你link

【解决方案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 宽度设置为 300
false - 将 var 宽度设置为 800
将 div 的 CSS 设置为宽度变量

【讨论】：