我注意到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();
})

})

===============>>#1 票数:0 已采纳

单击空白href的锚点将重新加载当前页面。
您应该使用哈希,并且最好防止事件处理程序中的默认操作,否则页面将始终重新加载,并且不显示动画。

更改

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

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

并做

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

  ask by DMS translate from so

未解决问题?本站智能推荐:

2回复

jQuery slideDown / slideUp问题

我无法使jQuery slideDown效果起作用。 我试图通过向下滑动来显示一个面板。 相反,它只是像show()方法一样显示,但在Firefox中它甚至没有显示。 jQuery的: HTML:
1回复

SlideDown无法正确设置动画效果-jQuery

我似乎对此很困惑。 我正在尝试在jQuery中使用slideDown函数,但是当单击div时,“信息” div只会跳跃并且没有动画。 我认为原因之一是.information div具有以下属性: 删除min-height属性后,动画将起作用。 但是我希望最小高度在那里。
3回复

.slideDown()子菜单效果不会将其下方的主li按下

在为导航栏创建了slideDown子菜单之后,我终于可以完成想要的效果。 但是当我在成品代码插入到我的主代码(因为我本来测试/只有一个上codepen标签创建它),子菜单滑下在主顶部li下方的一个点击以显示子菜单。 我还注意到,如果我单击其他li(在主导航上),则不会隐藏菜单。 这是整
1回复

jQuery SlideDown偶尔工作

我使用谷歌浏览器,但slideDown无法正常工作。 有时div下降,有些时间仍然关闭,我必须刷新页面并等待它决定滑动时。 这是代码: 的HTML 的CSS JAVASCRIPT 有时候它会滑下来……我的链接: http : //khchapterzero.a
2回复

slideDown对我不起作用

为什么这个jQuery代码不起作用? 有人有任何想法吗? 我不。
2回复

slideDown下拉菜单

所以我想在我的下拉菜单上做一个不错的小效果,但我不知道使用悬停和slideDown功能的正确方法 这就是我现在所拥有的,这不起作用它显示我的子菜单,不管我在徘徊的是什么,我希望它能够工作,因此它在元素上,只有具有子菜单的元素。 编辑: FIDDLE
4回复

jQuery slideDown和slideUp子菜单

jQuery函数slideUp和slideDown有一个小问题。 jsBin演示 我有一个垂直菜单,下面有一个垂直子菜单。 当用户输入带有子菜单的菜单项时,必须显示它,这是起作用的部分。 当用户离开菜单项并转到子菜单项时,它仍然需要可见。 我试图用setTimeout函
1回复

父子项内的子元素slideDown会使父项溢出

一个使用jquery设计了一个二级菜单。 当我将鼠标悬停在顶部菜单链接上时, 子菜单的类名DIV会下滑。 当我将鼠标悬停在此div中时,有一个链接,其子名称为subsubmenu的第二级再次向下滑动,并导致其父级( submenu )进一步扩展。 当您行动缓慢而正常时,此结构可以正常工
1回复

具有动态固定中心的jQuery SlideDown

我在jQuery中编写自己的popUp函数。 我动态获取宽度和高度,然后在单击事件后向下滑动元素。 但不幸的是,在我编写了确定高度的部分并设置了中心css之后,slideDown函数现在使元素出现在页面的中心并同时在上下方向上增长,而只是将其从最佳。 我想问题的主要来源应该是mar
6回复

具有设置高度和溢出的jQuery slideDown

我有以下HTML代码 和CSS 假设.text div有更多文本,我所做的是隐藏100px以下的文本量。 我如何slideDown() div以便我可以在单击按钮时查看文本? 使用$(".button").slideDown(); 不起作用,因为我需要删除高度,然后