jquery - slideDown() 效果问题

Question

我注意到 slideDown() 效果不适用于我的 div navigationMain，请注意我如何在 div navigationMain 中为我的标题菜单使用 ul/li 标签。另请注意，我是如何将 id 名称放置在标题导航 Portfolio/About/Contact 的 a/hyperlink 标记中的，所有这些都在 li 标记中，并且都在 div navigationMain 中。我试过对 navigationMain div 中的 id #about-link nav 按钮使用 slideDown() 效果，它假设打开一个名为 aboutlayout 的隐藏 div，但它打开了 div 的一小部分并立即自行关闭。出于某种原因，slideDown() 效果适用于另一个不包含 ul/li 和 a/hyperlink 标签的 div。在那个 div 中，我刚刚在 img 标签中放置了一个 id 名称，并且 slideDown() 效果起作用了。 slideDown() 效果是否可能不适用于 ul/li 和 a/hyperlink 标签？

JSFiddle:http://jsfiddle.net/Tb8h5/17/ http://jsfiddle.net/Tb8h5/17/embedded/result/ (导航菜单 portfolio/about/contact 文本没有出现在 JSFiddle 链接上，所以我添加了背景色来显示导航菜单的位置)

HTML

<div class="header">
<div class="container"> 
<div class="headerMain">  </div>
<div class="navigationMain"> 
<ul class="nav">
<li><a href="" id="portfolio-link">Portfolio</a></li>
<li><a href="" id="about-link">About</a></li>
<li><a href="" id="contact-link">Contact</a></li>
</ul>
</div>
</div>
</div><!-- end of header -->

<div class="aboutlayout"> </div> <!-- hidden div -->

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

CSS

.header {
background: #242424;
height: 165px;
background:url(../images/header.png) repeat center center; 
min-width: 1075px;
}

.container {
height: 165px;
margin-left: auto;
margin-right: auto;
width: 1075px; 
}

.headerMain{
height: 165px; 
position: relative;
width: 195px;
float: left;
left: 20px;
top: 4px;
background:url(../images/ARlogo.png) no-repeat center center; 
}

.navigationMain{
height: 154px;
margin-left: auto;
margin-top: -4px;
position: relative;
width: 665px;
right: 30px;
left: 160px;
}

li{
display: inline;
}

.nav {
position: relative;
top: 70px;
}

.nav li{   
display: block;
float: left;
}

.nav li {
background: url(../images/slash.png) no-repeat;
padding-left: 26px;
}

.nav li:first-child {
background: none;
}

.nav a {
display: block;
text-indent: -9999px;
height: 35px;
width: 150px;
}

#portfolio-link {
background: url(../images/portfolio.png) no-repeat;
}

#about-link {
background: url(../images/about.png) no-repeat;
height: 35px;
width: 115px;
}

#contact-link {
background: url(../images/contact.png)no-repeat;
}

#slash-link{
background: url(../images/slash.png)no-repeat;
}

.aboutlayout{
background: white; /*#ecebeb; */ 
height: 350px;
position: relative;
}

JQuery

$(document).ready(function() {

$('.aboutlayout').hide();

$('#about-link').click(function() {
$('.aboutlayout').slideDown();
})

})

Answer 1

具有空 href 的 anchor 会在您单击时重新加载当前页面。
您应该使用哈希，并且最好在事件处理程序中阻止默认操作，否则页面将始终重新加载，并且不会显示动画。

改变

<a href="" id="about-link">About</a>

到

<a href="#" id="about-link">About</a>

做

$('#about-link').click(function(e) {
    e.preventDefault();
    $('.aboutlayout').slideDown();
});