깨지기 전까지 외부/부모 요소를 무시하는 방법

Question

특정 화면 크기 (767px)에 도달 할 때까지이 코드 비트에서 div 태그를 무시하는 방법을 궁금 해서요.

<div class="parent"> 
    <h4 class"title">Title</h4> 
    <ul> 
     <li>Cities</li> 
    </ul> 
</div> 

Answer 1

당신은 자바 스크립트를 사용해야합니다.

왜 요소의 클래스 만 제거하지 않습니까? 이처럼 :

var parentClass = 'parent'; 
 

 
if ($(window).width() >= 767) { 
 
    var p = $('.parent'); 
 
    p.removeClass('parent'); 
 
} else { 
 
    p.addClass('parent'); 
 
}

<div class="parent"> 
 
    <h4 class "title">Title</h4> 
 
    <ul> 
 
    <li>Cities</li> 
 
    </ul> 
 
</div>

Answer 2

난 당신이 무시 무슨 뜻인지 확실 해요하지만 여전히 내 모든 표시, 그래서 이것은 당신이 찾고있는 정확하게하지 않을 수 있습니다. 그러나 화면 크기를 감지하고 JQuery 이벤트를 사용하여 변경하고 이에 따라 디스플레이를 조정합니다. 예를 들면 : 당신이 더 정확히 당신이 원하는 이유에 정교한 경우

function ShowHideParent() { 
    if($(window).width() >= 768 && $(window).height >= 480) 
     $('.parent').show(); 
    else 
     $('.parent').hide(); 
} 

$(document).ready(function() { 
    ShowHideParent(); 
}); 
$(window).resize(function() { 
    ShowHideParent(); 
}); 

, 우리는 더 나은 솔루션을 찾을 수 있습니다. 모바일 장치와 같은 소형 디스플레이의 문제 해결 방법으로 사용하고 있다는 느낌이 들었습니다. 그렇다면 Foundation과 같은 웹 프론트 엔드 프레임 워크를 확인하는 것이 좋습니다. 이러한 프레임 워크는 다양한 화면 크기를 수용하는 번거 로움을 덜어 주었고 해킹 된 해결 방법에 의지하지 않고도 깨끗하게 콘텐츠를 표시 할 수 있습니다.