javascript - 为什么 slideToggle 会向下并超出屏幕？

Question

我正在编写一些代码来切换 div 类。我想将 div 向下滑动到页面底部，再次单击时向上滑动。

我的 HTML 代码包含:

<div class="chat-sidebar">

    <div class="chat_head"> 
      <h4 align="center"><b>Online Users</b></h4> 
    </div>

    <div class="chat_body"> 
        <div class="sidebar-name" ></div> 
    </div>

</div>

和此 HTML 的 CSS:

.chat-sidebar{

    width: 200px;
    position: fixed;
      height: 370px;;
    right: 10px;
      bottom: 0px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgba(29, 49, 91, .3);
      border-radius:5px 5px 0px 0px;
}
.sidebar-name{
     padding-left: 10px;
     padding-right: 10px;
       margin-top : 0.8cm;
     font-size: 20px;
}
.chat_head{
      background:#f39c12;
    color:white;
      padding:2px;
      font-weight:bold;
      cursor:pointer;
      border-radius:5px 5px 0px 0px;
      margin-top: -10px;
}

现在我正在使用 jQuery 函数滑动主 chat-sidebar DIV，例如:

$(document).ready(function() {

    $('.chat_head').click(function(){
        $('.chat-sidebar').slideToggle('slow');
    });


});

slideToggle 在单击 .chat_head div 时工作正常。但是它下降得太远以至于它不再可见(在屏幕之外)。我在这里缺少什么？

Answer 1

您需要滑动切换 .chat_body 而不是整个包装器 div。因此，只需从 .chat-sidebar 中删除 height 并将其移至 .chat_body。现在在 .chat_body 上应用 slideToggle() 函数:

$(document).ready(function() {
  $('.chat_head').click(function() {
    $('.chat_body').slideToggle('slow');
  });
});

.chat-sidebar {
  width: 200px;
  position: fixed;
  right: 10px;
  bottom: 0px !important;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid rgba(29, 49, 91, .3);
  border-radius: 5px 5px 0px 0px;
}
.sidebar-name {
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 1px;
  font-size: 20px;
}
.chat_head {
  background: #f39c12;
  color: white;
  padding: 2px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px 5px 0px 0px;
  margin-top: -10px;
}
.chat_body {
  height: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-sidebar">
  <div class="chat_head">
    <h4 align="center"><b>Online Users</b></h4> 
  </div>
  <div class="chat_body">
    <div class="sidebar-name"></div>
  </div>
</div>