반응형 웹에서 제이쿼리 이벤트 전환 채택완료
<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());});댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인