我正在编写一些代码来切换 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 时工作正常。但是它下降得太远以至于它不再可见(在屏幕之外)。我在这里缺少什么?
最佳答案
您需要滑动切换 .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>
关于javascript - 为什么 slideToggle 会向下并超出屏幕?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39769108/