如何管理w.r.t他们的容器的html元素

Question

我有一个代表面包屑的div。

Link 1 / Link2 / Link 3

等等。 div占用浏览器的宽度。每当我调整浏览器大小时，如果可用的宽度不够，那么我想显示面包屑，如下所示

1） 链接1 / ... /链接3

2） ...... /链接3

点击...将显示整个面包屑，但会出现滚动条

据我所知，我必须使用窗口调整大小处理程序事件，但却混淆了如何启动，因为我想要做同样的事情。

Answer 1

这是你可以做到的一种方式：

• 在窗口调整大小时，检查div宽度是否为＆lt;到它的总和 子宽度（link1宽度+ link2宽度等）并将其作为函数。
• 如果是真的，用“...”替换中间链接的文本并将原始文本存储在数据属性（例如）中，并调用第一个函数（因此每当子元素的宽度> div元素，它将用“...”
替换锚文本
• 然后，在div上单击，将所有“...”替换为存储在数据属性中的原始文本。

Answer 2

另一种选择是使用this plugin，它会自动折叠和扩展您的面包屑。

根据窗口的宽度，您可以传递endElementsToLeaveOpen的不同值。