我有一些 div 具有由“点击”功能控制的动态高度,如下所示:
$('.expand').click(function() {
$(this).next('.collapse').slideToggle();
});
我正在尝试将jQuery wookmark 插件应用于 div,并且它可以工作,除了通过扩展其中一个部分来动态调整它们的高度。从文档中,我将其中一个示例复制到我的代码中,并且动态高度有效
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#container'), // Optional, used for some extra CSS styling
offset: 30, // Optional, the distance between grid items
itemWidth: 300 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('.outerwrapper');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});
你可以在这里看到这个工作。我怎样才能做到这一点,以便当您单击 div 内的标题之一时,布局会更新,就像在示例中那样。提前致谢。