Question

我对jQuery有点新手，但我确实知道了事情是如何工作的。现在我正在使用Isotope（流畅/响应式布局）来开发一个简单的页面，并成功地将Fancybox集成到其中的内容中。但问题是，每当我尝试点击Isotope中我的一个盒子中的图像链接时，假设每次点击后盒子都会放大，盒子将关闭回原来的大小，图像叠加在顶部整个东西。

我真的不知道如何解释它，但这里是我在jsfiddle中创建的网站sample：

1）不知怎的，我设法让盒子以我想要的方式工作，所以选择盒子不是问题。但是如何点击展开框的文本/视频链接，而不会将框关闭回原始尺寸和位置？我只想在点击另一个新盒子时关闭它。

2）而且，如果可能的话，每次点击窗口时窗口都可以滚动到所选的框吗？

我希望对任何人来说都不会太混乱。提前谢谢了！：）

Answer 1

我是新来的，所以我为缺乏彻底的回应而道歉。要获得所需的效果，您必须从展开的框中取消绑定单击函数并选择一个不同的元素（可能在展开时加载它/显示它？我建议将元素放在展开的元素中。）以运行相同的效果现在绑定到扩展框。这样，该框可以使用常规文本/视频/照片，您仍然可以删除展开。

Answer 2

如果您仍在寻找简单的变量解决方案，您可以这样做

$(function () {

    var $container = $('#container');

    $container.delay(2500).show().css({
        opacity: 0
    }).animate({
        opacity: 1
    }, 2500).isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 288
        },
        getSortData: {
            selected: function ($item) {
                return ($item.hasClass('clicked') ? -1000 : 0) + $item.index();
            }
        },
        sortBy: 'selected'

    });

    $('.maximised, .medium').hide();

    $('.display1, .display2').click(function () {
        var $this = $(this);
        bSelector = $this.hasClass('display1') ? '.maximised' : '.medium';

        var $previousSelected = $('.clicked');
        if (!$this.hasClass('clicked')) {
            $this.addClass('clicked');
            $previousSelected.find('.minimised').toggle();
            $previousSelected.find('.maximised').toggle();
            $previousSelected.find('.medium').toggle();
        }

        $previousSelected.removeClass('clicked');

        $this.find('.minimised').toggle();
        $this.find(bSelector).toggle();

        $container.isotope('updateSortData', $this).isotope('updateSortData', $previousSelected).isotope();
    });

});

可能仍会找到一个工作示例here。它在一些元素中具有链接和模态，这些元素在初始点击时最大化。

Jquery Isotope - 扩展.item中的可点击内容？

2 个答案: