slideDown()效应问题

Question

我注意到slideDown()效果不适用于我的div navigationMain，注意我是如何在div navigationMain中对标题菜单使用ul/li标记的。还请注意，我是如何在标题navigationMain /About/Contact的a/超链接标记中放置id名称的，所有这些名称都位于li标记中和div navigationMain中。我尝试对slideDown div中的id #about导航按钮使用navigationMain ()效果，它的假设是打开一个名为about的隐藏div，但是它打开div的一个小部分并立即关闭它自己。由于某种原因，slideDown()效果适用于另一个div，它不包括ul/li和a/超链接标记。在这个div中，我刚刚在img标记中放置了一个id名，slideDown()效果就可以工作了。对于ul/li和a/超链接标记，slideDown()效果是否可能不太好呢？

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的锚将重新加载当前页。

您应该使用哈希，最好防止事件处理程序中的默认操作，否则页面将始终重新加载，并且动画不会显示。

变化

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

至

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

并这样做

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