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

Question

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

Javascript 代码

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

HTML 代码

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

CSS

.mobilechaticonON {
  display: block;
  height: 35px;
  position: fixed;
  bottom: 0;
  left: 21%;
  width: auto;
  padding: 5px 15px;
  background: #16a085;
  border-radius: 4px 4px 0px 0px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  z-index: 999;
  transition: height .4s ease;
 }
 .smschat span:before {
     content:"Chat through text message";
 }
 .webchat span:before {
     content:"Chat using web chat";
 }
 .mobilechat span:before {
     content:"Live Sales Chat - Online!";
 }
 .mobilechaticonON button {
     border: 0;
     background: transparent;
     height: 35px;
 }
 .mobilechaticonON button span:before {
     font-family: Arial;
     font-size: 1.2em;
     color: #fff;
 }

我正在尝试找出一种方法，当用户点击此 div 之外的其他内容时，div 会返回到 35px 而不是 100px。到目前为止没有任何运气。

Here is a fiddle但我不确定为什么初始幻灯片功能甚至在那里都不起作用。在我的普通页面上工作正常。哦

Answer 1

定位文档，如果点击来自chat-slide之外的任何元素，则将高度改回

$(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">