Question

我想知道如何忽略这段代码中的div标签，直到达到某个屏幕尺寸（767px），但仍然显示内部的所有内容。

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

Answer 1

您需要使用Javascript。

为什么不删除元素的类？像这样：

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();
});

如果您详细说明您想要的内容和原因，我们可能会找到更好的解决方案。我有一种感觉，你可能会将其用作小型显示器的解决方法，例如移动设备上的显示器。如果是这种情况，那么您可能有兴趣查看一个Web前端框架，例如Foundation。这些框架已经解决了容纳各种屏幕尺寸的麻烦，并且可以帮助干净地显示您的内容，而无需采用hacky解决方法。

如何在破坏点之前忽略外部/父元素

2 个答案: