Question

我已经为我的手风琴菜单创建了简洁的小脚本，它工作得很好。但我有一些“小故障”问题:(

这是我的问题：尝试点击“首页”链接然后“关于我们”链接返回和第四个并注意底部链接（“服务”和“联系人”链接）如果仔细观察，您可以看到这些链接移动了一点（一个或两个像素不多），而动画是运行。
有没有办法解决这个问题？如果可能的话，我想保持Html结构完好无损。这是指向Fiddle的链接，以向您显示我的问题。谢谢！！

<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}

.wrapper{
display:block;
width:100px;
owerflow:hidden;
margin:0px auto;
margin-top:40px;
background-color:black;
position:relative;
}

.wrapper ul
{
list-style-type:none;
}

.wrapper ul li ul a{line-height:20px;}

a
{
color:white;
display:block;
width:100px;
text-decoration:none;
height:20px;
text-align:center;
line-height:20px;
}

.service{
background-color:red;
display:block;
width:100px;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000000;
outline:none;
}

.about{
background-color:red;
display:block;
width:100px;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000000;
outline:none;
}

.home{
background-color:red;
display:block;
width:100px;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000000;
outline:none;
}

.contact{
background-color:red;
display:block;
width:100px;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000000;
outline:none;
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"   type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

$('.wrapper ul li ul:first').addClass('active');

  $('.wrapper ul li ul').hide();
     $('a.home,a.about,a.service,a.contact').click(function() {
        if($('a.home,a.about,a.service,a.contact').next('ul').hasClass('active')) 
        {
     $('.active').stop(true, true).slideUp('slow');
       $('.active').removeClass('active');
         $(this).next('ul').addClass('active');
          $('.active:not(:animated)').stop().slideDown('slow');
        }
     });
});
</script>
</head>
<div class="wrapper">
<ul>
<li><a class="home" href="#">Home</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>

<li><a class="about" href="#">About Us</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>

<li><a class="service" href="#">Service</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>

<li><a class="contact" href="#">Contact</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

手风琴菜单行为

0 个答案: