Question

我不知道我的代码出了什么问题，但每次点击蓝色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();
});

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

Answer 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 ..

单击时更改div的宽度

1 个答案: