CSS와 자바 스크립트로 확장 가능한 상자를 만드는 방법은 무엇입니까?

편집 : 애니메이션으로 설정하고 철회 가능하도록 지정해야합니다. 그렇다면 + 기호가 나머지 상자와 함께 움직이지 않는 이유는 무엇입니까? 왜 애니메이션이 아닌가요? 전환 CSS가 있습니다.CSS와 자바 스크립트로 확장 가능한 상자를 만드는 방법은 무엇입니까?

나는 이것이 전에 물어 보았지만, 나는 내 자신의 글쓰기를 시도했다. 그것은 단지 ... 작동하지 않는다. 무슨 뜻인지 알기 위해 jsfiddle을 확인하십시오.

자바 스크립트를 너무 많이 사용하지 않으려 고합니다. 내가 사용하는 것은 메뉴의 상태를 토글하는 것입니다. 모든 애니메이션은 CSS 여야합니다. 자, 나를 혼란시키는 유일한 이유는 입니다. 왜이 작동하지 않습니까?

jsfiddle : http://jsfiddle.net/bjhph51u/1/

HTML :

<div id="expandbox" expanded="false"> 
<input name="username" type="text" placeholder="Username" disabled></input> 
<input name="password" type="password" placeholder="Password" disabled></input> 
<button type="submit" disabled>go</button> 
</div> 
<a href="#" id="plus" onclick="expandBox()"> 
+ 
</a>

자바 스크립트 :

//expand top box 
var box = document.getElementById("expandbox"); 
function expandBox(){ 
    if(box.getAttribute("expanded")=="false"){ 
     box.setAttribute("expanded","true"); 
     box.style.height="100px"; 
     box.style.display="block"; 
    }else{ 
     box.setAttribute("expanded","false"); 
     box.style.height="0px"; 
     box.style.display="none"; 
    } 
}

CSS :

#expandbox { 
    display:none; 
    position:fixed; 
    height:0px; 
    -webkit-transition:height 0.5s; 
    transition:height 0.5s; 
    -o-transition:height 0.5s; 
    -moz-transition:height 0.5s; 
}

사전에 감사를 도와주세요! 당신이 window.onload에 할당 된 익명 함수의 지역 변수 작동하는지,

$('#plus').click(function() { 
    $('#expandbox').toggle("slow"); 
});

출처

2014-12-10 hexagonest

당신은 이런 식으로 뭔가를 시도 할 수 있습니다. 바이올린 옵션을 다음으로 변경하십시오. 프레임 워크 & No wrap - in <body> 확장. 이 방법은 함수가 전역이 될 것이고, 당신은 그것을 잘 호출 할 수 있습니다.

출처

2014-12-10 11:02:39

나는 그것이 이런 종류의 물건이 필요하지 않습니다으로 jQuery를 사용하지 않습니다. 어쨌든 고마워! – hexagonest

문제는 다음과 같습니다

출처

2014-12-10 11:03:07 meskobalazs

굉장! 이제는 내 유일한 문제는 실제 애니메이션입니다. +가 왜 사라지고 왜 애니메이션이되지 않습니까? – hexagonest

'display : none'과'display : block' 사이에 애니메이션이 없습니다. 그것은 아무 의미가 없기 때문에. 먼저, 'display : block'으로 변경 한 다음 불투명도 0과 1 사이에서 애니메이션을 적용하십시오. – meskobalazs

높이 차이는 어떻습니까? 높이 : 0px 다음 높이 : 100px – hexagonest

아래와 같이 HTML & JS 코드를 편집했으며 정상적으로 작동합니다. 시도 해봐!!

HTML 코드 :

<div id="expandbox" expanded="false"> 
     <input name="username" type="text" placeholder="Username" disabled></input> 
     <input name="password" type="password" placeholder="Password" disabled></input> 
     <button type="submit" disabled>go</button> 
</div> 
<a href="#" id="plus">+</a>

JS 코드 :

//expand top box 
var box = document.getElementById("expandbox"); 
function expandBox(){ 
    if(box.getAttribute("expanded")=="false"){ 
     box.setAttribute("expanded","true"); 
     box.style.height="100px"; 
     box.style.display="block"; 
    }else{ 
     box.setAttribute("expanded","false"); 
     box.style.height="0px"; 
     box.style.display="none"; 
    } 
} 
document.getElementById("plus").onclick = expandBox;

출처

2014-12-10 11:09:48

CSS와 자바 스크립트로 확장 가능한 상자를 만드는 방법은 무엇입니까?

답변

관련 문제