jQuery 버튼을 클릭하면 div가 표시되고 페이지의 임의 영역을 클릭하면 div가 숨겨집니다.

Question

나는 내 마크 업과 같은 것을 가지고있다. 누군가가 클릭하는 버튼을위한 것입니다.

<div class="logout-wrap"> 
    <div class="account-info"> <a href="../profile.php">admin ADMIN</a> 
</div><!--.account-info--> 
<div class="account-info-icon"> 
    <ul> 
    <li><a href="" class="account-sprited notice"><span>5</span></a></li> 
    <li><a href="" class="account-sprited profile profiletest"></a></li> 
    </ul> 
</div> 
</div> 

기본적으로 숨길 영역이며, 누군가가 버튼을 클릭하면 내용이있는 div가 표시됩니다.

<div class="account-info-box" style="display: block;"> 
    <div class="top-info"> 
    <div class="profile-img"> 
     <img alt="" src="../images/profile.png"> 
    </div><!--.profile-img--> 
    <div class="profile-text"> 
     <span class="username">sgsh dshjds</span> 
     <span class="acctype">Account Type- Agent</span> 
     <span class="view-profile"><a href="" class="profile">View Profile</a></span> 
    </div><!--.profile-text--> 
    </div><!--.top-info--> 
    <div class="bottom-info"> 
    <ul> 
     <li><a href="" class="profile">Create An Account</a></li> 
     <li><a href="" class="profile">Signout</a></li> 
    </ul> 
    </div><!--.bottom-info--> 
</div> 

여기에 페이지가로드되면 account-info-box의 div가 숨겨집니다. 프로필을 클릭하면 div 계정 정보 상자가 표시됩니다. 이를 위해 내가 가진이

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
    jQuery('div.account-info-box').hide(); 
     jQuery('a.profile').click(function(event){ 
     event.preventDefault(); 
     jQuery('div.account-info-box').show(); 
    }); 
    }); 
</script> 

그러나 여기 내가 다시 페이지의 다른 영역을 클릭 할 때 다시 할 숨길 것을 원하는처럼 내 JQuery와. 그러니 누군가 친절하게 어떻게하는지 말해 줄 수 있습니다. 어떤 도움이나 제안이라도 대단히 감사 할 것입니다. 감사합니다

편집 내가 지금 TypeError: event.target is undefined

Answer 1

등의 표시 오류가 document.ready 함수 내에서 스크립트에이를 추가하려면이

jQuery(document).ready(function() { 
    jQuery('div.account-info-box').hide(); 
    jQuery('.profiletest').click(function(event){ 
     event.preventDefault(); 
     jQuery('div.account-info-box').show(); 
    }); 
}); 

jQuery(document).ready(function(event) { 
    if(event.target.ClassName !== 'profiletest') { 
    jQuery('div.account-info-box').hide(); 
    } 
}); 

처럼 내 jQuery 코드를 변경했습니다.

jQuery("body").click(function(e){ //or jQuery(document) 
    if(e.target.className !== "profile") 
    { 
    jQuery('div.account-info-box').hide(); 
    } 
}); 

최종 코드입니다. (업데이트)

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery('div.account-info-box').hide(); 
    jQuery('a.profile').click(function(event){ 
     event.preventDefault(); 
     jQuery('div.account-info-box').show(); 
    }); 

    jQuery("body").click(function(e){ //or jQuery(document) 
    if(e.target.className !== "profile") 
    { 
     jQuery('div.account-info-box').hide(); 
    } 
    }); 
}); 
</script> 

Answer 2

<script type="text/jscript"> 
document.Click = Hide(); 

//to show on button click 
$(".bottom-info").Click(function(){ 
$(".account-info-box").attr("display","block"); 
}); 

//to hide it 
Hide(function(){ 
$(".account-info-box").attr("display","none"); 
}); 

<script>