jQuery를 표시 숨기기 기능

나는 내용 .login 사업부가 숨기기를 보여주기 위해 jQuery를 기능jQuery를 표시 숨기기 기능

function ShowHide(){ 
    $(".login").animate({"height": "toggle"}, { duration: 1000 }); 
}

하고 링크를 사용하고 있습니다 :

onclick="ShowHide(); return false;"

그러나이 링크 만 표시하고 숨길 사업부를 전환 ,하지만 사용자가 div를 클릭하면 숨기고 싶습니다. 페이지 래퍼가 있지만 jQuery에 대한 도움이 필요합니다.

출처

2009-10-25 chris

사용자가 숨기려면 아무 곳이나 클릭하려는 경우이를 숨기려면 body 요소에 이벤트를 넣어야합니다.

ps : HTML 요소에서 onclick을 사용하지 마십시오. - 내가 위의 귀하의 요구 사항에 대한 이해를 기반으로 임시 변통으로 만들었다

출처

2009-10-25 10:52:25 dusoft

예제 마크 업을 제공해 주시겠습니까? – chris

$ ('# myLink')와 같은 것을 원합니다. click (ShowHide); –

나는 Jquery에 매우 익숙하며 초보자 단계인데 사과하고, HTML에서 onlick을 사용하는 것은 나쁜 습관이라고 이해한다. 그리고 가장 좋은 연습 방법의 예를 보여줄 수 있다면 정말 고마워 할 것이다. – chris

<html> 
    <head> 
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 
    <style> 
     .login-div { width: 100px; height: 100px; margin:auto; border: solid 1px black; position: relative; background-color: #aeaeae; display:none;} 
     .parent-div { width: 300px; height: 300px; margin:auto; border: solid 1px #aeaeae; position: relative;} 
     .footer { margin-bottom: 0px; margin-top:auto; margin-left:auto; margin-right:auto; height:40px; width:200px; position:relative; display:none;} 
    </style> 
    <script> 
     $(window).load(function(){ 
      var DEBUG = 0; 
      var count = 0; 
      $('.parent-div').bind('click', function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       DEBUG==1?console.log('Target: '+$(e.target).attr('class')):''; 
       DEBUG==1?console.log('Show Hide: '+(count++)):''; 
       //ShowHide(); 
       var target_class = $(e.target).attr('class'); 
       if(target_class == 'link'){ 
        $(".login-div").animate({"height": "toggle"}, { duration: 1000 }); 
        $('.footer').toggle(); 
       } 
       else{ 
        $(".login-div").animate({"height": "hide"}, { duration: 1000 }); 
        $('.footer').hide(); 
       } 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
     <div class="parent-div">Parent Box:<br/> 
      <a href="#" class="link">ShowHide</a> 
      <div class="login-div">Child Box:</div> 
      <div class="footer">click out side the gray box & inside the Parent-box 
     </div> 
    </body> 
</html>

그것에 대해 JQuery와 사용하기 이벤트 매니저 (. addevent의 라인 (클릭 예 STH, 기능)), 체크 아웃 코드. 이 일은 당신 일을해야합니다. 여기에 자바 스크립트에서 "버블 링"이벤트 버블 링을 사용하고 parent-div 클래스 요소에 바인드 된 이벤트 리스너를 사용합니다. 요소의 범위를 늘리려면이 값을 <body/>에 연결할 수 있습니다.

출처

2009-10-25 14:49:34 Ajaxe

방화 광 & FF를 사용하는 경우 DEBUG = 1을 설정할 수 있습니다. – Ajaxe

페이지에 onclick 이벤트가 여러 개 있고 본문에 onclick 이벤트를 첨부했는데 예제가 도움이된다면 이벤트 버블 링 및 전달이 복잡해집니다. – dusoft

나는 dusoft에 동의한다. DOM에서 더 높게되면 'body'의 'click'핸들러에 더 많은 호출이 발생하고, 자식 요소 중 하나의 'bubbling'체인의 어딘가에서는 event.stopPropagation() 필수 처리기가 호출되지 않으며 문제의 DIV가 숨기거나 표시되지 않습니다. 이벤트 처리 체인을 고려해야합니다. – Ajaxe

이

요소를 숨기기 위해 클릭 할 특정 사업부를 설립하는 대신, 당신은 단순히 클릭하면 숨길 수있는 "보여줘"요소의 일부가 아닌 모든 요소를 설정할 수 있습니다 더 쉽게 에. 다음 당신의 준비 코드 장소에서

나는 당신의 자바 스크립트 부분에서, 무엇을 의미하는지 예 :

$("body *").not('.login, .login *').fadeOut(1000); 
// This tells jquery to get all elements, in the body, not containing the 
//  class login or any subelement of it 
// The fade out is just a simple jquery hide animation set to 1 second in this 
//  example but you can hide it however you want

하고 나중에 밖으로 작동하는 방법을 참조하십시오.

출처

2012-02-21 23:45:13 SpYk3HH

jQuery를 표시 숨기기 기능

답변

관련 문제