jQuery slideDown not fluid
jQuery slideDown not fluid
提问于 2011-10-01 22:42:05
我正在为我的朋友制作一个jQuery菜单。菜单已经做好了，唯一的问题是滑块不流畅，我在这里找不到问题所在。
jQuery代码：
$.fn.vmenu=function(settings)
{
vMenu={
init: function(elem) {
$(elem).find('li').each(function(){
var u=$(this).children('ul');
if (u.length>0) {
$(this).addClass('has_child');
}
var a=$(this).children('a');
if (a.hasClass('active')) {
$(this).addClass('active').parents('li').addClass('open');
}
});
$(elem).find('ul').each(function(){
var o=$(this).find('li.open');
var a=$(this).find('a.active');
if (o.length == 0 && a.length==0) {
$(this).css('display','none');
}
});
$(elem).find('a').click(function(){
return vMenu.click($(this));
});
},
click: function(elem) {
var l=$(elem).parent('li');
var u=$(l).children('ul');
if (u.length == 0) {
return this.forward(elem);
}
if ($(l).hasClass('open')) {
$(l).removeClass('open');
$(l).find('ul').stop(true,true).slideUp(300);
$(l).find('li').removeClass('open');
if($(l).children('a').hasClass('open')) {
$(l).children('a').css({color:'#939393'});
$(l).children('a').removeClass('open');
}
} else {
$(l).addClass('open');
$(u).stop(true,true).slideDown(300);
$(l).children('a').css({color:'#F37121'});
$(l).children('a').addClass('open');
}
return false;
},
forward: function(elem) {
return true;
}
}
vMenu.init($(this));
}
$(document).ready(function(){
$('#vmenu').vmenu();
});CSS代码：
/* ### partner box ### */
.partnerBox { padding-top: 52px; width: 253px; float: left; background: url('http://www.realbingo.nl/images/partner-top.png') left top no-repeat; }
.partnerBox .bottom { padding-bottom: 12px; float: left; background: url('http://www.realbingo.nl/images/paasbonus-bottom.png') left bottom no-repeat; }
.partnerBox .mid { padding: 0 20px 0 15px; width: 218px; float: left; background: url('http://www.realbingo.nl/images/paasbonus-mid.png') left top repeat-y; }
.partnerBox h3 { padding-left: 5px; margin-top: -36px; color: #fff; font-size: 20px; }
.partnerBox ul { padding: 0px 0 0 0; margin-bottom: -5px; overflow: hidden; width: 100%; }
.partnerBox li { padding-left: 5px; font-size: 13px; float: left; list-style: none; width: 208px; line-height: 39px; border-bottom: 0px; }
.partnerBox li a { padding-left: 9px; color: #939393; text-decoration: none; display: block; background: url('http://www.realbingo.nl/images/arrow1.png') left center no-repeat; }
.partnerBox li a:hover { color: #F37121 !important; }
#vmenu li { border-bottom: #ece3e3 solid 1px; }
#vmenu li > ul > li { border-bottom: 0px; height: 30px; line-height: 30px; margin-top: -8px;}
.text ul{ line-height: 18px; margin-bottom: 2px; }HTML代码：
<div class="partnerBox">
<div class="bottom">
<div class="mid">
<h3>Linkpartners</h3>
<ul id="vmenu">
<li><a href="#">Bingo</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li><a href="#">Roulette</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li><a href="#">Poker</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
<li class="text"><a href="#">Tekst</a>
<ul>
Dit is een lap tekst die door en door gaat tot het einde.. en verder... :D:D:D:D:D:D:D:D
</ul>
</li>
</ul>
</div>
</div>
</div>任何提示和/或想法，使代码更有效率，也非常感谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-27 19:25:21
如果你谈论的是slideDown跳跃，当它到达显示的底部时，它很可能是由".text ul“CSS的下边距引起的。jQuery无法计算包括边距在内的高度。
如果您谈论的是在动画过程中移动的slideDown内容，这通常与您正在滑动的元素或第一个子元素的顶部填充有关。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7620902
复制相关文章
相似问题
腾讯云开发者
