제이쿼리 미디어 쿼리 문제
관련링크
본문
게시판 목록 스킨(list.skin.php) 에서 창 크기가 768 픽셀 이하일 때만
표 제목(TBODY TR 부분)을 클릭하면 해당 게시물로 이동하도록 자바스크립트를 짰습니다.
문제는 창 크기를 줄였다가 크게 늘리면
768 이상인데도 클릭이 됩니다.
어떻게 수정해야 하나요?
<script>
const trChangeMediaQuery = window.matchMedia('(max-width: 767px)')
function mobileTableRowChange(e) {
if (e.matches) {
$('#bo_list .tbl_head01 tbody tr').click(function() {
window.location = $(this).find('.bo_tit a').attr('href');
});
} else {
$(this).find('.bo_tit a').removeAttr("href");
}
}
trChangeMediaQuery.addListener(mobileTableRowChange)
mobileTableRowChange(trChangeMediaQuery)
</script>
답변 3
화면이 커졌을때 addListener를 삭제해주는 스크립트도 짜야되지 않을까싶네요
일반적으로 인터넷 창화면을 줄였다 늘렸다 만으론 그때그때 사이트가 측정을 못하기 때문에
사용자가 특정 행동을 취했을때 리프레쉬를 시켜줘야하는데
reload로 새로고침을 해주면 작동할 것으로 생각됩니다
<script>
function 함수이름(){
location.reload();
}
</script>
외에 구글링으로 reload 를 검색해보시면 관련 자료를 찾으실수 있을거에요!
$('#bo_list .tbl_head01 tbody tr').click(function() {
if( 창크기>768)
window.location = $(this).find('.bo_tit a').attr('href');
});
이러면 되지 않을까요?
답변을 작성하시기 전에 로그인 해주세요.