<div class="fix-bottom fix-bottom-code"> <div class="list-item"> <div class="item-info hide"> <img src="/resources/img/v2/ewmtb_1.png"> <div class="sm-txt">扫描二维码关注</div> </div> <a href="#" class="code"> <span class="icons-code-lg"></span> <span class="txt">微信扫描</span> </a> </div> </div> <div class="fix-bottom fix-bottom-home"> <div class="list-item"> <a href="#"> <span class="icons-home-lg"></span> <span class="txt2">返回首页</span> </a> </div> </div> <div class="fix-bottom fix-bottom-comment"> <div class="list-item"> <a href="#"> <span class="icons-comment-lg"></span> <span class="txt2">意见反馈</span> </a> </div> </div> <div class="fix-bottom fix-bottom-up"> <div class="list-item"> <a href="#"> <span class="icons-up-lg"></span> <span class="txt2">返回顶部</span> </a> </div> </div>
/*右下脚悬浮操作开始*/ .fix-bottom-code { position: fixed; bottom: 217px; right: -75px; } .fix-bottom-home { position: fixed; bottom: 161px; right: -75px; } .fix-bottom-comment { position: fixed; bottom: 105px; right: -75px; } .fix-bottom-up { position: fixed; bottom: 50px; right: -75px; } .fix-bottom .list-item a { border: 1px solid #DBDBDB; border-radius: 4px 0 0 4px; width: 120px; height: 44px; display: flex; align-items: center; justify-content: flex-start; border-right: none; padding-left: 14px; background-color: #fff; } .fix-bottom-code>.list-item>a { background-color: #219EED; border: none; border-radius: 0; } .fix-bottom>.list-item>a>.txt2 { display: inline-block; font-size: 13px; color: #555; margin-left: 15px; } .fix-bottom>.list-item .sm-txt { color: #333; font-size: 13px; text-align: center; margin-bottom: 5px; } .fix-bottom-code>.list-item>a>.txt { font-size: 13px; color: #fff; margin-left: 15px; } .fix-bottom-code>.list-item>.item-info { border: 1px solid #219EED; text-align:center; } .icons-code-lg { display: inline-block; width: 18px; height: 18px; background-image: url(/resources/img/v2/sytbhc_1.png); background-position: -100px -100px; } .icons-home-lg { display: inline-block; width: 20px; height: 17px; background-image: url(/resources/img/v2/sytbhc_1.png); background-position: -150px -100px; } .icons-comment-lg { display: inline-block; width: 23px; height: 21px; background-image: url(/resources/img/v2/sytbhc_1.png); background-position: -200px -100px; } .icons-up-lg { display: inline-block; width: 19px; height: 11px; background-image: url(/resources/img/v2/sytbhc_1.png); background-position: -250px -100px; } /*右下肢悬浮操作结束*/
function initHoverBottombar() { $('.fix-bottom').hover(function(e) { var this$ = $(this); this$.find('.item-info').removeClass('hide'); this$.animate({ 'right': "0" }); }, function(e) { var this$ = $(this); this$.animate({ 'right' : '-75px' },function(e){ this$.find('.item-info').addClass('hide'); }); }); }
总结:
1、刚开始我是使用ur-li这种来做,但是点击其中一个,其它的都展开了,然后又替换成div-div但是这种也有相同情况,于是我只好分开来做用div div同级来做,这样就没问题了,我在想这个问题可能跟子绝对定位有关系!!!