Question

我注意到slideDown（）效果不适用于我的div navigationMain，请注意我在div navigationMain中如何使用ul / li标签作为标题菜单。另外请注意我是如何将我的标题名称放在a / hyperlink标签中的标题导航Portfolio / About / Contact all li标签内以及div navigationMain中的所有内容。我已尝试将slideDown（）效果用于navigationMain div中的id＃about-link导航按钮，并假设打开一个名为aboutlayout的隐藏div，但它会打开div的一小部分并立即关闭。由于某种原因，slideDown（）效果适用于另一个不包含ul / li和/ hyperlink标签的div。在该div中，我只是在img标记中放置了一个id名称，并且slideDown（）效果正常。是否有可能slideDown（）效果不适用于ul / li和/ hyperlink标签？

JSFiddle：http://jsfiddle.net/Tb8h5/17/ http://jsfiddle.net/Tb8h5/17/embedded/result/（导航菜单组合/ 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();
});

slideDown（）效果问题

1 个答案: