div를 열기 위해 더블 클릭

Question

나는 div를 onclick으로 보여주기 위해 javascript를 사용했다. 그러나 div 밖으로 나가면 div를 숨기고 싶다.

:

더 검색 후, 나는이 기능을 발견하고 완벽하게

를 작동하지만 문제가있는 코드는 다이빙

내 코드를 보여, 처음으로 더블 클릭을 필요로

<script> 
// click on the div 
function toggle(e, id) { 
    var el = document.getElementById(id); 
    el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 

    // save it for hiding 
    toggle.el = el; 

    // stop the event right here 
    if (e.stopPropagation) 
    e.stopPropagation(); 
    e.cancelBubble = true; 
    return false; 
} 

// click outside the div 
document.onclick = function() { 
    if (toggle.el) { 
    toggle.el.style.display = 'none'; 
    } 
} 

</script> 
<style>#tools{display:none;}</style> 

<div id="tools">Hidden div</div> 
<a href="#" onclick="toggle(event, 'tools');">show/hide</a> 

이것은 내 전체 코드이므로 컴퓨터에서 테스트 할 수 있습니다.

이

이다 질문 :

Answer 1

이 시도 - http://jsfiddle.net/JjChY/1/

변경을

el.style.display = (el.style.display == 'none') ? 'block' : 'none'; 

에

el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none'; 

Answer 2

문제는 el.style.display는 요소의 인라인 스타일에서 읽는 기능은 두 번의 클릭이 필요, 난 클릭 (한 번의 클릭)하지 (더블 클릭)에 사업부를 표시 할 것입니다,하지의 CSS .

따라서 첫 번째 클릭에서 el.style.display은 '' (빈 문자열)이므로 '없음'으로 설정됩니다. 두 번째로 el.style.display은 'none'이므로 작동합니다.

인라인 스타일이 비어 있으면 요소의 CSS에서 읽어야합니다.

function getStyle(x, styleProp) { 
    if (x.currentStyle) { 
     var y = x.currentStyle[styleProp]; 
    } 
    else if (window.getComputedStyle) { 
     var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); 
    } 
    return y; 
} 

// click on the div 

function toggle(e, id) { 
    var el = document.getElementById(id); 
    var display = el.style.display || getStyle(el, 'display'); 
    el.style.display = (display == 'none') ? 'block' : 'none'; 

    // save it for hiding 
    toggle.el = el; 

    // stop the event right here 
    if (e.stopPropagation) e.stopPropagation(); 
    e.cancelBubble = true; 
    return false; 
} 

// click outside the div 
document.onclick = function() { 
    if (toggle.el) { 
     toggle.el.style.display = 'none'; 
    } 
}​ 

DEMO : 나는이에 대한 quirksmode에서 getStyle 방법을 사용하는거야 http://jsfiddle.net/JjChY/2/

Answer 3

사용이 :

el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none'; 

이 작동합니다.

Answer 4

코드가 약간 복잡합니다. 그것은 훨씬 더 간단 쓸 수있다 : 당신이 jQuery를하는 경우, 당신은 외부 클릭이 같은 뭔가를 할 수

<script> 
var toggle = function(id) { 
    var element = document.getElementById(id); 
    element.className = element.className === 'hidden' ? '' : 'hidden'; 

    return false; 
}; 
</script> 

<style> 
.hidden { 
    display: none; 
} 
</style> 

<div id="tools" class="hidden">Hidden div</div> 
<a href="#" onclick="toggle('tools');">show/hide</a> 

Answer 5

.

먼저 "tools"div에 마우스가있을 때 클래스를 설정하십시오. 마우스가 안에 있지 않으면 클래스를 제거하십시오.

$('#tools').hover(function() { 
    $('#tools').addClass("inside"); 
}, 
function() { 
    $('#tools').removeClass("inside"); 
}); 

그런 다음 HTML에서 트랙을 클릭합니다. "inside"클래스가 "tools"div에 없으면 숨 깁니다.

$("html").click(function() { 
    $("#tools").not(".inside").each(function() { 
     $("#tools").hide(); 
    }); 
});