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 div时，

.chat_head正常工作。但它下降得太远，以至于它不再可见（在屏幕外）。我在这里缺少什么？

Answer 1

您需要使用slideToggle .chat_body而不是整个包装div。因此，只需从height移除.chat-sidebar并将其移至.chat_body即可。现在应用slideToggle()上的.chat_body函数：

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

Answer 2

试试这个：

$(document).ready(function() {
     $(".head").on("click",function(){
         $(".chat-sidebar").slideToggle("slow");
     })
     
 })

.wrapper {
   border: 1px solid gray;
   width: 200px;
   position: fixed;
   right: 10px;
   bottom: 0;
   min-height: 50px;
   border-radius:3px 3px 0px 0px;
}

.head {
  background:#f39c12;
  color:white;
  font-weight:bold;
  cursor:pointer;
  position: absolute;
  width: 200px;
  height: 50px;
  border-radius:5px 5px 0px 0px;
                 
 }
.chat-sidebar {
  background-color: #fff;
  height: 200px;
}

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

为什么slideToggle会向下并离开屏幕？

2 个答案: