Question

我正在寻找解决问题的潜在解决方案。

首先，我知道媒体查询在这方面起了作用，我可以设置断点甚至是小断点。这是我已经做过的事情。

然而，我想要做的是稍微超出此范围。当整体宽度会导致子内容在其父级内部进行换行时，我想改变我的子html的样式，从而形成更加动态的解决方案。

举个例子：

<nav class="parent" style="width:500">
    <ul class="inline-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li> // uh-ho, this won't fit - wrap it!
        <li>Item 5</li>
    </ul>
</nav>

它代表一种导航结构。当内容变得太大时我想堆叠它。最简单的方法是使用javascript将一个类附加到父级 - 这将允许我堆叠而不是换行，并且比我只能使用媒体查询更优雅地完成它。

问题是如何检测联系人实际上是否比其父母更广？

Answer 1

这是一个非常基本的jQuery解决方案。

var parent = $('.parent').width();
var child = $('.inline-list').width();

if(child > parent){

  // Adjust accordingly
  // Maybe add/remove/change .inline-list class with $('.inline-list').addClass('.stacked-list').removeClass('.inline-list');

}

是否可以检测父元素内的内容是否太宽而不适合？

1 个答案: