2013-08-21 2 views
0

http://jsfiddle.net/tfwqD/1/, 시간이 지나면 위의 바이올린과 마찬가지로 다시

확장 할 수 없습니다 같은 사업부를 온 클릭 사업부를 확장하고 자동 축소. 클릭 할 때 div를 확장 할 수 있고 setInterval은 3000ms 후에 div를 축소합니다. 그러나 버튼을 다시 클릭하면 div가 다시 확장되지 않습니다.

여기 JS 코드이다 (전체 JSfiddle 위이다)

function growDiv(div) { 
growDiv = document.getElementById(div); 
if (growDiv.clientHeight) { 
    growDiv.style.height = 0; 
} else { 
    var wrapper = document.querySelector('.measuringWrapper'); 
    growDiv.style.height = wrapper.clientHeight + "px"; 
} 
setInterval(function(){growDiv.style.height = 0},3000); 

} 

답변

0

문제는 growDiv 함수 이름 및 변수 이름 충돌에 기인한다. 변수 이름을 변경하거나 this과 같이 로컬로 만듭니다.

function growDiv(div) { 
    var growDiv = document.getElementById(div); 
    if (growDiv.clientHeight) { 
     growDiv.style.height = 0; 
    } else { 
     var wrapper = document.querySelector('.measuringWrapper'); 
     growDiv.style.height = wrapper.clientHeight + "px"; 
    } 
    setInterval(function() { 
     growDiv.style.height = 0 
    }, 3000); 
    return; 
} 


업데이트 :

http://jsfiddle.net/tfwqD/12/

var flag = false; 

function growDiv(div) { 
    var growDiv1 = document.getElementById(div); 

    if (flag) return; 
    flag = true; 
    var wrapper = document.querySelector('.measuringWrapper'); 
    growDiv1.style.height = wrapper.clientHeight + "px"; 

    setTimeout(function() { 
     growDiv1.style.height = '0px'; 
     flag = false; 
    }, 3000); 
    return; 
} 

내가 플래그를 설정하고도 그냥 작동하는지 확인하기 위해 변수 이름을 수정했습니다.

건배 !!

+0

업데이트

시도 중 하나를 변경하지만 클릭 한 후 링크와 DIV를 열 것으로 보인다 몇 번을 다시 클릭 한 후, 그것을 붕괴시키는,이 과정을 반복 '더 읽기' 전체 div를 표시하지 않고 훨씬 더 빨리 닫을 수 있습니다. –

+0

두 번째 클릭을 중지하는 플래그를 설정해보세요. – bhb

+0

업데이트 된 플래그 인 Jsfiddle을 사용해도 여전히 동일하게 동작합니다. 그냥 깃발을 무시하고 간격을 유지하지 않는 것 같습니다 –

0

growDiv을 함수 이름과 변수 이름으로 모두 유지하는 것 외에는 모든 것을 올바르게 수행했습니다. 어떤 JsFiddle http://jsfiddle.net/tfwqD/5/이 근무하고있다

관련 문제