单击时更改 div 的宽度答案

【问题标题】：Change the width of a div when clicked单击时更改 div 的宽度
【发布时间】：2014-10-10 11:19:28
【问题描述】：

我不知道我的代码出了什么问题，但每次单击蓝色的 Chat Here 按钮时都会出错。当iframe 隐藏时按钮应该更短，然后当iframe 向上滑动时，蓝色按钮应该与iframe 一样占据整个空间。

这是我目前拥有的 JS

function showChat() {
    jQuery("#blk-collaboration .chatbox").slideToggle("slow",function(){
        jQuery("#blk-collaboration #toggle").css("background","#45A1F1");
    });

    jQuery('#btn-chat').click(function() {
        $(this)//this is a button DOM element. wrapping in jQuery object.
       .toggleClass('wide'); // removing wide class so button became smaller.
    });
}



$(document).ready(function(){
    $('.chatbox').hide();
});

如果您也能给我提供一个演示，我将不胜感激。这段代码已经工作了两天了，我还没有找到合适的解决方案。

【问题讨论】：

为什么要把#btn-chat的点击处理函数放在showChat()函数里面？

标签： javascript jquery html css iframe

【解决方案1】：

首先，您忘记将; 放在您的高度属性上。另一个重要的事情是你需要像这样改变你的班级位置：

.button {
  background: #45A1F1; 
  height: 40px;
  width: 620px; /*Width of regular button */ 
}
.wide { 
  background: #45A1F1; 
  height: 40px;
  width:  300px; !important; /* Width of wide button */ 
}

你可以使用这个 jQuery 来简化你的代码：

$(document).ready(function(){
    $('.chatbox').hide();
    $('#btn-chat').click(function() {
        $("#blk-collaboration .chatbox").slideToggle("slow",function(){
        $("#blk-collaboration #toggle").css("background","#45A1F1");
    });
      $(this)//this is a button DOM element. wrapping in jQuery object.
      .toggleClass('wide'); // removing wide class so button became smaller.
    });
});

看看这个Fiddle..

【讨论】：