마우스가 레이어 벗어나 다른곳을 클릭하면 레이어 안보이게 하는 방법?
본문
아래와 같이 버튼 클릭시 레이어 보이게하기 안보이게 하기입니다.
버튼 클릭하지않고 마우스가 레이어에서 벗어나 다른곳을 클릭하면 레이어가 사라지게 할 수는 없을까요?
--------------------------------------------------------------------------------
<script type="text/javascript">
var cc=0
function showHide(id) {
if (cc==0) {
cc=1
document.getElementById(id).style.display="block";
} else {
cc=0
document.getElementById(id).style.display="none";
}
}
</script>
<div class="menu">
<a href="<?php echo NT_HOME_URL ?>">
<img id="logo_img" src="<?php echo $tset['logo_img'] ?>" alt="<?php echo get_text($config['cf_title']) ?>">
</a>
<a href="#layer1" onclick="showHide('layer1');return false;">메뉴1</a>
<a href="#layer2" onclick="showHide('layer2');return false;">메뉴1</a>
<a href="#layer3" onclick="showHide('layer3');return false;">메뉴1</a>
<a href="#layer4" onclick="showHide('layer4');return false;">메뉴1</a>
</div>
<div id="layer1">
<a href="#layer1" onclick="showHide('layer1');return false;"><img src="btn_close.gif" alt="닫기"></a>
보여질 내용입니다.1
</div>
<div id="layer2">
<a href="#layer2" onclick="showHide('layer2');return false;"><img src="btn_close.gif" alt="닫기"></a>
보여질 내용입니다.2
</div>
<div id="layer3">
<a href="#layer3" onclick="showHide('layer3');return false;"><img src="btn_close.gif" alt="닫기"></a>
보여질 내용입니다.3
</div>
<div id="layer4">
<a href="#layer4" onclick="showHide('layer4');return false;"><img src="btn_close.gif" alt="닫기"></a>
보여질 내용입니다.4
</div>
답변 1
<script>
$(function() {
$('a[href^=#layer').hover(function() {
var href = $(this).attr('href');
$(href).show();
}, function() {
var href = $(this).attr('href');
$(href).hide();
});
});
</script>
