如何在切换之前更改按钮的初始宽度？

Question

需要帮助如何在未点击时缩短此demo上的聊天按钮的宽度？ :(一直想弄清楚但没有运气。

JS

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

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

Answer 1

让

<div id="btn-chat" class="button wide">Button</div>

是你的按钮。

按钮的样式为

.wide {  

background: black; 
  height: 100px; 
  width:  600px !important; /* Width of wide button */ 
}
.button {
  background: black; 
  height: 100px; 
  width: 250px; /*Width of regular button */ 
}

用于更改按钮宽度cat的jquery代码看起来像

//Add click handler to button.
jQuery('#btn-chat').click(function() {
  $(this)//this is a button DOM element. wrapping in jQuery object.
  .toggleClass('wide'); // toggling .wide class ( if class presend it will removed, if not - added ) .
});

Answer 2

在样式表中设置初始宽度，然后通过添加新类来通过单击事件再次设置完整宽度。 addClass。