slideDown() effect issue

Question

div navigationMain에서 내 머리글 메뉴에 ul/li 태그를 사용하는 방법에주의를 기울여서 slideDown() 효과가 내 div navigationMain에서 작동하지 않는 것을 확인했습니다. 또한 내 머리글 탐색 Portfolio/About/Contact에있는 모든/li 태그 내의 하이퍼 링크 태그와 div navigationMain에있는 id 이름을 어떻게 배치했는지 확인합니다. navigationMain div의 id # about-link 탐색 버튼에 대해 slideDown() 효과를 사용하여 시도했는데 aboutlayout이라는 숨겨진 div를 여는 것으로 가정했지만 div의 작은 섹션을 열고 즉시 닫습니다. 어떤 이유로 slideDown() 효과는 ul/li 및/하이퍼 링크 태그가없는 다른 div에서 작동합니다. 해당 div 내에서 img 태그에 id 이름을 넣었으며 slideDown() 효과가 작동합니다. slideDown() 효과가 ul/li 및/하이퍼 링크 태그와 잘 작동하지 않을 수 있습니까?

JSFiddle : http://jsfiddle.net/Tb8h5/17/http://jsfiddle.net/Tb8h5/17/embedded/result/ (탐색 메뉴 포트폴리오/약/연락처 텍스트는 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(); 
});