div를 숨기려면 div를 누르십시오.

div onclick을 토글하는 간단한 자바 스크립트 코드를 사용하고 있습니다. k-prim.biz/Untitled-2.html -이 링크에서 실제로보실 수 있습니다 - 아주 간단한 데모 페이지입니다. 내가하고 싶은 것은 "링크"를 클릭 할 때뿐만 아니라 div 외부를 클릭 할 때도 div를 숨기는 것입니다. 또한 div가 표시 될 때 어떻게 "링크"의 CSS 스타일을 변경할 수 있습니까? 미리 감사드립니다.div를 숨기려면 div를 누르십시오.

<script type="text/javascript" language="javascript"> 
    function showHide() { 
    var ele = document.getElementById("showHideDiv"); 
if(ele.style.display == "block") { 
     ele.style.display = "none"; 
    } 
else { 
    ele.style.display = "block"; } 
} 
</script> 
<a href="#" onClick="return showHide();" >link</a> 
<div id="showHideDiv" style="display:none;">hello!</div>

출처

2013-02-01 Ljubo Valevski

당신은 나에게 작업 할 코드를 부여하지, 그래서 당신은 당신의 요구에 맞게이를 수정해야합니다 : 사업부를 숨길

$(document).click(function() { 
    if(this != $("#the_div")[0]) { 
     $("#the_div").hide(); 
    } 
});

는 사용자가 어디서든 클릭하는 경우를 그 div가 아닌 페이지.

출처

2013-02-01 18:28:15

죄송합니다, 그냥 말에 ")"닫는 괄호이어야한다 코드 –

을 추가했습니다. – user460114

@ user460114 잘 잡습니다. 감사. –

이것은 내가 작성한 빠른 해킹입니다. 왜 문서의 아무 곳이나 클릭하여 동일한 작업을 수행하려는 이유가 확실하지 않습니다. 이것을 원하면 jQuery ('# link')를 jQuery (document)로 대체하십시오.

<html> 
     <head> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 
        jQuery('#link').click(function(){ 
         if(jQuery('#showHideDiv').hasClass('hide')) { 
          jQuery('#showHideDiv').removeClass('hide'); 
          jQuery('#link').css('color', 'red'); 
         } else { 
          jQuery('#showHideDiv').addClass('hide'); 
          jQuery('#link').css('color', 'blue'); 
         } 
        });    
       }); 
      </script> 
     </head> 
     <body> 
      <a href="#" id="link" >link</a> 
      <div id="showHideDiv" class="hide">hello!</div>  
     </body> 
    </html>

이

은

당신이 필요할 것 자바 스크립트 ... 바닐라를 사용하여 jsfiddle

http://jsfiddle.net/EUScV/9/

도 추가 CSS 규칙

.hide { 
     display:none; 
    }

출처

2013-02-01 19:15:47 theshadowmonkey

에 대한 링크입니다 showHideDiv이 아닌 요소에 대해 onclick 처리기를 등록하십시오. .

function showHide() { 
    ... 
} 

// showHide onclick everywhere 
document.onclick = showHide;

링크의 CSS를 변경하려면 앵커 태그에 ID를 할당하고 새 onclick을 등록하십시오.

<a id="myLink" href="...">link</a> 

document.getElementById("myLink").onclick = function() { 
    // show hide code 
}

그러나 나는 오히려 Elliot의 대답처럼 jQuery 방법을 사용합니다.

출처

2013-02-01 19:16:04 Jasen

HTML :

<div id="settings"> 
<input/><select></select><span>text</span> 
</div>

자바 스크립트 :

var settings = document.getElementById('settings'); 

document.onclick = function(e){ 

    var target = (e && e.target) || (event && event.srcElement); 
    var display = 'none'; 

    while (target.parentNode) { 

     if (target == settings) { 
      display ='block'; 
      break; 
     } 
     target = target.parentNode; 
    } 

settings.style.display = display; 

}

출처

2014-03-05 15:47:52

div를 숨기려면 div를 누르십시오.

답변

관련 문제