html - ブレークポイントまで外側/親要素を無視する方法

Question

特定の画面サイズ (767px) に達するまで、このコードの div タグを無視する方法を考えていましたが、それでもすべてを内部に表示します。

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

Answer 1

You'll need to use Javascript.

Why do you not remove only the class of the element? Like this:

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などの Web フロントエンド フレームワークをチェックしてみてください。これらのフレームワークは、さまざまな画面サイズに対応するための多くの手間を処理し、ハックな回避策に頼ることなくコンテンツをきれいに表示するのに役立ちます.