Question

我正在为我的朋友制作一个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 code：

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

非常感谢任何使代码更高效的提示和/或想法。

Answer 1

如果你谈到slideDown跳转到显示的底部时，很可能是由“.text ul”CSS的底部边缘引起的。 jQuery无法计算包括边距在内的高度。

如果您正在谈论在动画期间移动的slideDown内容，这通常与您正在滑动的元素或第一个子元素的顶部填充有关。

jQuery slideDown不流畅

1 个答案: