Question

在Masonry中，可以通过单击删除元素。问题是，您必须直接单击该元素 - 因此，如果您将这些“砖块”用作图像库（只要这些照片作为背景图像包含），您可以通过单击元素来删除它们。问题是，当您将这些用作某些消息/信息/其他内容容器时。然后，由于格式相关的东西，父元素被“隐藏”在其他标签后面，你实际上无法点击它。

此处显示的问题是： http://jsfiddle.net/dan1410/SfU5T/ 您可以关闭红色框，但不能关闭绿色框，因为它们与其他元素重叠。

我尝试过代码：

eventie.bind( container, 'click', function( event ) {
// don't proceed if item was not clicked on
if ( !classie.has( event.target, 'closeable' ) ) {
return;
}
// remove clicked element
msnry.remove( event.target );
// layout remaining item elements
msnry.layout();
});
});

和

var todelete = document.querySelector('.closeable');
eventie.bind( container, 'click', function( event ) {
// remove clicked element
msnry.remove( todelete );
// layout remaining item elements
msnry.layout();
});
});

但你仍然需要直接点击你要关闭的元素......

我的砌体内容结构如

<div id="masonry" >
   <div class="item blue closeable">
     <div id="itheader"><h2 class="secsectiontitle">Space available</h2></div>
     <div id="itcontent">
        some statistics here...<br/>
        and here, too
     </div>
</div>

只有具有.closeable类的元素应该是可关闭的。

所以，问题是：如何使用按钮/链接关闭元素？我对JS不太熟悉，所以我想请你们帮忙。提前谢谢！

Answer 1

除非有处理程序阻止click事件在子元素上传播，否则click事件应该没有任何问题。

另外，如果您使用的是jQuery，则应使用jQuery Masonry的API。

注意：我无法访问您的小提琴，无法测试解决方案

var $container = $('#masonry').on('click', '.closeable', function (e) {
    $container.masonry('remove', e.currentTarget);
    $container.masonry(); //layout
    $container.masonry('reloadItems'); //OP said it was also required
});

砌体 - 通过单击其他东西来删除元素，而不是元素本身

1 个答案: