如何在砌体布局中使用下拉菜单？

Question

我正在使用带有 Masonry 的布局列表（并且 animOnScroll 在其顶部）。我想将 bootstrap 下拉菜单添加到我的列表项中，但是 Masonry 直接插入每个下拉菜单 <li> DOM 节点 a style="position: absolute; left: 0px;".

我已经覆盖 <li> 项的 animOnScroll CSS 规则（选择器 .grid li{ 匹配我的下拉项）。

但是，我无法弄清楚如何删除这些直接样式属性或者为什么它们会出现在每个下拉列表中 <li> 作为 style="position: absolute; left: 0px;"

Answer 1

Masonry 提供了一个 item-selector option 来避免此类问题。早知如此，结果发现AnimOnScroll在直接实例化Masonry的时候添加了自己的选项。然后，错误的行在 AnimOnScroll 中：

self.masonry = new Object(new Masonry( self.el, {
                itemSelector: 'li',
                transitionDuration : 0
            } ));

应该改为：

self.masonry = new Object(new Masonry( self.el, {
                itemSelector: '.grid-item',
                transitionDuration : 0
            } ));

如何在砌体布局中使用下拉菜单？

How can I use dropdowns in a masonry layout?

javascript

css

twitter-bootstrap

masonry