첫 번째 클릭시 div 디스플레이를 전환하는 방법은 무엇입니까?

Question

HTML 헤드 :

이

<script type="text/javascript" language="JavaScript"> 

    function getStyle() { 
     var temp = document.getElementById("cont").style.display; 
     return temp; 
    } 

    function switch01() { 
     var current = getStyle(); 
     if (current == "none") { 
      document.getElementById("cont").style.display = "block"; 
     } 
     else { 
      document.getElementById("cont").style.display = "none"; 
     } 
    }​ 

</script> 

몸 :

이

<a href="javascript:switch01('cont')">CONTENT</a> 

CSS :

#cont{ 
    display: none; 
} 

페이지를로드 한 후 - 첫 번째 클릭이 작동하지 않습니다. 첫 번째 클릭 후 모든 것이 작동합니다.
또한 어떻게하면 div를 천천히 표시하거나 숨길 수 있습니까 (일시적이지 않은 슬라이딩 효과 사용)? 이 인라인이어야합니다

Answer 1

당신은, 내 추천 jQuery를 사용하는 슬라이드 효과를 원하는 경우 :

$('#toggle').click(function() { 
    $('#cont').slideToggle(); 
});​ 

이 DEMO를 참조하십시오.

슬라이딩 속도를 변경하는 경우 자세한 내용은 documentation을 참조하십시오.

 http://api.jquery.com/hide/ 

    http://api.jquery.com/show/ 

그리고 효과를 슬라이딩 JQuery와이 부서에서 최고 수준입니다

Answer 2

당신이 DEMO

<a href="#" onclick="return switch01('cont')">CONTENT</a> 

을 할 필요가이

<script type="text/javascript" language="JavaScript"> 
function switch01(objId) { 
    var current = document.getElementById(objId).style.display; 
    document.getElementById(objId).style.display=(current!="block")?"block":"none"; 
    return false 
} 
</script> 

가 위의 질문에 대한 답변 (없음에 대한 테스트를 반전하는 것은 블록에 대한 테스트로)

업데이트 : : jQuery를 대신 사용 하시겠습니까? 여기서는 코드를 작성해야합니다. 마이클이 놓친 거짓 반환.

<a href="#" id="toggle">CONTENT</a> 

$(function() { // wait for the page to load 
    $('#toggle').on("click",function(e) { // when link clicked 
    $('#cont').slideToggle(); // slide open or closed 
    return false; // or e.preventDefault(); // stop the click executing the href 
    });​ 
});​ 

Answer 3

처음으로 얻는 값은 "정의되지 않음"입니다.

할 수 있습니다 :

1) 자바 스크립트를 통해 값을 설정하면 페이지가로드; 처음에 값이 아무것도 할 수 없다는 것을 알고 있기 때문에

document.getElementById("cont").style.display = "none"; 

또는

2

)는 없음으로 "정의되지 않은"값을 디코딩;

var temp = document.getElementById("cont").style.display; 
if (temp == "undefined") 
    temp = "none"; 
return temp; 

둘 다 꽤 못생긴 해결책이지만 작동합니다.

Answer 4

이 사업부를 숨기기 위해 ... 당신이

 $('cont').hide(); function. 

더 많은 관련 정보에 좀 걸릴 수 있습니다 여기에 사용할 수 있습니다. 아래에 주어진대로 인수를 전달하면됩니다. 그리고 그것은 작업을 수행합니다.참고로

 $("cont").click(function() { 
     $(this).hide("slide", { direction: "down" }, 1000); 
    }); 

: