jQuery fadein이 한 번만 실행될 수있는 이유는 무엇입니까?

Question

<div id="nav"> 
<a href="#" id="l1">link1</a><br> 
<a href="#" id="l2">link2</a><br> 
<a href="#" id="l3">link3</a><br> 
</div> 

<div id="content" style="background:pink;"> 
INDEX 
</div> 

    <div id="content1" style="display:none; background:red;"> 
     11111111 
    </div> 

    <div id="content2" style="display:none; background:yellow;"> 
     22222222 
    </div> 

    <div id="content3" style="display:none; background:blue;"> 
     33333333 
    </div> 

<style> 
#nav{ 
height:300px; 
width:80px; 
background:gray; 
} 

#content,#content1,#content2,#content3{ 
height:300px; 
width:600px; 
position:absolute; 
left:90px; 
top:8px; 
text-align:middle; 
} 
</style> 

<script src="jquery.js"></script> 
<script> 
$("#l1").click(function(){ 
$("#content,#content2,#conten3").hide(); 
$("#content1").toggle(); 
}); 
$("#l2").click(function(){ 
$("#content,#content1,#conten3").hide(); 
$("#content2").toggle(); 
}); 
$("#l3").click(function(){ 
$("#content,#content1,#conten2").hide(); 
$("#content3").toggle(); 
}); 
</script> 

여기 코드는 모든 링크가 한 번만 성공적으로 클릭 할 수있는 이유는 무엇입니까? (난 단지 3 2에 1을 클릭 할 수 있고, 내가 일을 다시 클릭 할 경우, 실패했습니다.)

Answer 1

당신은 당신의 선택기에 오타가 - hide 라인의 각 content에서 t을 누락. 즉, #content3은 다시 숨겨지지 않았고 항상 다른 두 div의 맨 위에 머물러있었습니다.

See working jsFiddle.

Answer 2

전성기로 일부 선택자에는 't'가 없습니다.

토글 대신 fadeIn을 사용해야합니다. 동일한 탭을 두 번 클릭하면 선택한 div가 계속 표시됩니다.