Javascript在单击任何其他元素时更改css

现在，我有一个菜单固定在屏幕底部，高度为35px，单击它时会执行以下操作：

Javascript代码

    function slideChat() {
    div = document.getElementById('chat-slide');
    div.style.height = "100px";
    div.style.transition = "height .4s ease";
    }

 <div id="chat-slide" class="mobilechaticonON">
      <button onclick="javascript:slideChat();" class="mobilechat"><span></span></button>
      <br>
      <button class="smschat"><a href="bing.com"><span></span></a></button>
      <br>
      <button class="webchat"><a href="google.com"><span></span></a></button>
    </div>

HTML代码

    function slideChat() {
    div = document.getElementById('chat-slide');
    div.style.height = "100px";
    div.style.transition = "height .4s ease";
    }

 <div id="chat-slide" class="mobilechaticonON">
      <button onclick="javascript:slideChat();" class="mobilechat"><span></span></button>
      <br>
      <button class="smschat"><a href="bing.com"><span></span></a></button>
      <br>
      <button class="webchat"><a href="google.com"><span></span></a></button>
    </div>

我试图找出一种方法，当用户点击这个div之外的其他东西时，div会回到35px而不是100px。到目前为止没有任何运气

---

但我不确定为什么初始幻灯片功能在那里根本不起作用。在我的正常页面上运行良好。O.O

以

文档为目标，如果点击源于
聊天幻灯片
之外的任何元素，请将高度更改为向后

$(document).on('click', function(e) {
    console.log('clicking anywhere works !');
    if ( ! $(e.target).closest('#chat-slide').length ) {
        $('#chat-slide').css('height', '35px');
    }
});

如果您正在使用jQuery（用jQuery标记），请使用适当的事件处理程序

$('.mobilechat').on('click', function() {
    console.log('clicking the button works !');
    $('#chat-slide').css({
        height: '100px',
        transition : 'height .4s ease' 
    });
});

同时也在改变

<button onclick="javascript:slideChat();" class="mobilechat">



公正

<button class="mobilechat">


提供你的
CSS/Style
还有..提供一把小提琴看看我可能会把它的副本放在标题里，在脚本标签里面。当在其外部单击时，高度不会变回原来的高度。@Xander这里是这个答案的一部分。看起来很管用。在我的网站上。它抛出错误“未捕获引用错误：未定义slideChat”和“未捕获引用错误：未定义hideChat”。我把小提琴里的东西放在标题里，在脚本标签里。这是你的函数，它与代码无关！您将用于内联处理程序的函数放在范围之外，可能放在文档就绪的内部。去掉这些函数，改用它。@adeneo D'oh。好的，我删除了那些内联函数。代码的“onclick=”位。现在Chromes console不会抛出任何错误，但单击按钮现在不会执行任何操作。废话。对不起，伙计们。与此抗争，对javascript来说真的很陌生。我知道该站点已经调用了jQuery1.7.2，这是放在后面的。