slidetoggle抖動現(xiàn)象
使用slidetoggle制作下拉菜單 ? 為什么點擊了一項 ?下面的幾項不論收縮還是展開 都會出現(xiàn)抖動 ?要怎么清除這種情況啊 幾項菜單之間是有margin-bottom值得
Yep_
2016-03-13
2 回答
舉報
0/150
提交
取消
2016-03-13
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>招聘日歷查看</title>
?? ?<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
?? ? <style>
?? ??? ??? ?.main-right {
?? ??? ??? ??? ?width:950px;
?? ??? ??? ??? ?min-height: 600px;
?? ??? ??? ??? ?float:right;
?? ??? ??? ??? ?margin:30px 0;
?? ??? ??? ??? ?border:1px solid #d8d8d8;
?? ??? ??? ?}
?? ??? ??? ?.main-right-top{
?? ??? ??? ??? ?margin:20px 40px;
?? ??? ??? ??? ?color: #01d4a9;
?? ??? ??? ??? ?padding-bottom: 10px;
?? ??? ??? ??? ?border-bottom:1px solid #d8d8d8;
?? ??? ??? ?}
?? ??? ??? ?.main-right-content{
?? ??? ??? ??? ?margin:20px 40px;
?? ??? ??? ?}
?? ??? ??? ?.monday,.tuesday,.wednesday{
?? ??? ??? ??? ?margin-bottom: 20px;
?? ??? ??? ?}
?? ??? ??? ?.bgmonday span,.bgtuesday span,.bgwednesday span{
?? ??? ??? ??? ?display: block;
?? ??? ??? ??? ?line-height: 21px;
?? ??? ??? ??? ?color:white;
?? ??? ??? ?}
?? ??? ??? ?.hide1,.hide2,.hide3{
?? ??? ??? ??? ?display:none;
?? ??? ??? ?}
?? ??? ??? ?.border{
?? ??? ??? ??? ?width:50px;
?? ??? ??? ??? ?height:3px;
?? ??? ??? ??? ?float:left;
?? ??? ??? ??? ?background-color: #d4e4f2;
?? ??? ??? ??? ?margin-top:45px;
?? ??? ??? ?}
?? ??? ??? ?.monday-info{
?? ??? ??? ??? ?width:800px;
?? ??? ??? ??? ?height:50px;
?? ??? ??? ??? ?background-color:#f0efef;
?? ??? ??? ??? ?margin:20px 50px;
?? ??? ??? ??? ?border-left: 4px solid #d4e4f2;
?? ??? ??? ?}
?? ??? ??? ?.monday-info1{
?? ??? ??? ??? ?width:800px;
?? ??? ??? ??? ?height:20px;
?? ??? ??? ??? ?background-color:#d8e9f7;
?? ??? ??? ?}
?? ??? ??? ?.bgmonday,.bgtuesday,.bgwednesday{
?? ??? ??? ??? ?height:21px;
?? ??? ??? ??? ?background-color: grey;
?? ??? ??? ??? ?cursor:pointer;
?? ??? ??? ??? ?width:160px;
?? ??? ??? ?}
?? ? </style>
?? ? <script>
?? ? ?? ?// 周一
?? ??? ??? ?$(function () {
?? ??? ??? ??? ?$(".bgmonday").bind("click",function(){
?? ??? ??? ??? ??? ?$(".hide1").slideToggle(1000)
?? ??? ??? ??? ?});
?? ??? ??? ?});
?? ??? ??? ?// 周二
?? ??? ??? ?$(function () {
?? ??? ??? ??? ?$(".bgtuesday").bind("click",function(){
?? ??? ??? ??? ??? ?$(".hide2").slideToggle(1000)
?? ??? ??? ??? ?});
?? ??? ??? ?});
?? ??? ??? ?// 周三
?? ??? ??? ?$(function () {
?? ??? ??? ??? ?$(".bgwednesday").bind("click",function(){
?? ??? ??? ??? ??? ?$(".hide3").slideToggle(1000)
?? ??? ??? ??? ?});
?? ??? ??? ?});
?? ? </script>
</head>
<body>
?? ?<div>
?? ??? ?<div>
?? ??? ??? ?<div>
?? ??? ??? ??? ?<span>招聘日歷</span>
?? ??? ??? ?</div>
?? ??? ??? ?<!--日歷部分-->
?? ??? ??? ?<div>
?? ??? ??? ??? ?<div ><!--星期一-->
?? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ?<span>周一  2015-3-14</span>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ?<div style="display:block"><!--隱藏內(nèi)容區(qū)-->
?? ??? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div><!--星期一結(jié)束-->
?? ??? ??? ??? ?<div><!--星期二-->
?? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ?<span>周二  2015-3-14</span>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div><!--星期二結(jié)束-->
?? ??? ??? ??? ?<div><!--星期三-->
?? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ?<span>周三  2015-3-14</span>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ?<div>
?? ??? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div><!--星期三結(jié)束-->
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</body>
</html>
2016-03-13
把源代碼貼出來吧，