Question

我正在使用jquery Isotope来创建一个投资组合库，几乎所有东西都按预期工作，我唯一想改变的是打开内容的行为。现在当你点击一张照片时，内容框会展开并显示一个带有一些文字的更大图像，问题是当你再次点击内容框（.item）时，内容会回到原来的大小，我不想要因为某些方框包含多个带有colorbox的图像。

最好的解决方案是在'大'容器上添加一个关闭按钮，而不是使用整个盒子区域，但这证明比我能处理的更多。

以下是我用于控制框尺寸和点击检测的代码：

   $(function() {

     var $container = $('#pageWrapper'),
          $items = $('.item');

    $('#filter').find('a').click(function() {
        // get the href attribute
        var filterName = '.' + $(this).attr('href').slice(1);
        filterName = filterName === '.show-all' ? '*' : filterName;
        $container.isotope({
            filter: filterName
        });
        return false;
    });

// change size of clicked element
    $container.find('.item').live('click', function() {
        if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');
        } else {
            jQuery('.large > .item-content');
            jQuery('.large > .thumb');
            jQuery('.large > h3');
            $container.find('.large').removeClass('large');

            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

        }
    });

    // switch selected class on buttons
    $('#categories').find('.option-set a').click(function() {
        var $this = $(this);

        // don't proceed if already selected
        if (!$this.hasClass('selected')) {
            $this.parents('.option-set').find('.selected').removeClass('selected');
            $this.addClass('selected');
        }

    });
    // isotope behavior
    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 10
        },

任何想法如何在点击时关闭“大”框并关闭它而不是整个框？

提前致谢!!

Answer 1

好吧，我终于有了这个工作，所以我将分享我对代码所做的更改;可能不是最好的但它有效。这对你来说可能很有用。

这段代码正在缩小它的原始大小：

if ($(this).is('.large')) {
            jQuery('.item-content', this).fadeToggle("fast", "linear");
            jQuery('.thumb', this).fadeToggle("fast", "linear");
            jQuery('h3', this).fadeToggle("fast", "linear");
            $(this).toggleClass('large');
            $container.isotope('reLayout');

几天后，我改变了以下代码：

if ($(this).is('.large')) {
        jQuerycontainer.find('.large').each(function(){
        jQuery(this).toggleClass('large');  });

现在一旦.item扩展到.item.large，它就不会调整大小，直到你点击另一个.item，无论你点击大盒子多少次它都会保持不变！所以现在我可以将几个图像添加到一个盒子中并使用Lightbox或Colorbox打开它们而不用我的同位素.item.large缩小！：d

Answer 2

我认为一个好的解决方案是this one here。基本上，您可以在每个Isotope元素中任何div 一个可点击的“最大化”或“最小化”元素;像一个按钮，一个区域，一个图标，一个链接或其他什么。而且，您不必担心会遇到像event.stopPropagation（）这样的jQuery方法。

jQuery Isotope - 如何禁用展开的.item中的可点击内容？

2 个答案: