如何关闭同位素布局完成时展开的项目的关闭按钮

Question

我修改了同位素布局完成事件，以便当您单击某个项目时，它会展开，当您单击另一个项目时，另一个项目将再次变小。它工作正常，但我想对展开的项目设置一个关闭按钮，以便您可以再次缩小该项目。

这是我修改过的代码。我添加了原始Isotope文档中的$(.item).removeClass('gigante');。

 $container.on( 'click', '.item', function() {        
   $('.item').removeClass('gigante');
   $( this ).toggleClass('gigante');
   $container.isotope('layout');
 });

这是我的小提琴，其关闭按钮不起作用。

http://jsfiddle.net/vanduzled/D26nG/

我不介意你点击expaned div.item，它会关闭。除了点击其他项目之外，我只想要一些其他的方法来关闭它。

Answer 1

您必须将函数绑定到close元素，并阻止事件传播。例如，在你的“$ container.on（'click'，'。item''，function（）{”...

下面加上这个

    $container.on('click', '.close', function () {
        $('.item').removeClass('gigante');
        $container.isotope('layout');
        return false;
    });