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

Here is a fiddle但我不确定为什么初始幻灯片功能甚至无法在那里工作。在我的普通页面上正常工作。 O.o

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

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

1 个答案: