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

Question

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

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。 到目前为止没有任何运气。

这是一个小提琴但我不确定为什么初始滑动功能甚至不能在那里工作。 在我的普通页面上正常工作。 吴

Answer 1

定位document ，如果点击来自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">