【问题标题】: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 设置为宽度变量

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-09-22
      • 1970-01-01
      • 1970-01-01
      • 2014-10-05
      • 2013-12-31
      • 2011-11-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多