slideDown（）效果问题

Question

我注意到slideDown（）效果不适用于div navigationMain，请注意我如何在div navigationMain中的标题菜单中使用ul / li标签。 另请注意，我是如何在id标记中以及所有div navigationMain中的头文件nav Portfolio / About / Contact的a / hyperlink标记中放置一个id名称的。 我试过对NavigationMain div中的id＃about-link nav按钮使用slideDown（）效果，并假设它会打开一个称为aboutlayout的隐藏div，但它会打开div的一小部分并立即关闭自身。 由于某些原因，slideDown（）效果可用于另一个不包含ul / li和a / hyperlink标记的div。 在该div中，我刚刚在img标签中放置了一个id名称，并且slideDown（）效果起作用。 ul / li和a / hyperlink标记是否可能对slideDown（）效果不起作用？

JSFiddle： http : //jsfiddle.net/Tb8h5/17/ http://jsfiddle.net/Tb8h5/17/embedded/result/（JSFiddle链接上没有出现导航菜单组合/ about / contact文本，因此我添加了背景色以显示导航菜单的位置）

的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();
});