반응형 웹에서 제이쿼리 이벤트 전환
본문
<script type="text/javascript">
$(function(){
var gnbHd = $('.gnbHd');
gnbHd.find('>ul>li>ul').hide();
gnbHd.find('>ul>li>a')
.mouseover(function(){
gnbHd
.find('>ul>li>ul:visible')
.slideUp(200)
.parent('li')
.removeClass('active')
.find('>a')
.css('fontWeight','');
$(this)
.next('ul:hidden')
.slideDown(200)
.parent('li')
.addClass('active')
.find('>a')
.css('fontWeight','bold');
})
.focus(function(){
$(this).mouseover();
})
.end()
.mouseleave(function(){
gnbHd
.find('>ul>li>ul')
.slideUp(200)
.prev('a')
.css('fontWeight','');
});
});
</script>
상단메뉴바의
메뉴가 가로형에서 모바일 사이즈 800px일때 버튼형 메뉴로 전환시
이벤트를 mouseover에서 click으로 변경할수 있나요? 방법을 알려주시면 감사하겠습니다.
답변 2
unbind로 mouseover를 해제하고 bind로 click 이벤트를 등록하면 될 것 같네요.
이렇게 하면 어떨까요.
jQuery(function($) {
var onCB = function(e) {
//뭔가 한다.
}
var offCB = function(e) {
//뭔가 한다.
}
var responsive = function(width) {
var $target = $('#target').off().focus(onCB);
if (width == 800) {
$target.click(onCB);
} else {
$target.hover(onCB, offCB);
}
}
$(window).resize(function(e) {
responsive($(this).width());
})
responsive($(window).width());
});