jQuery Isotope – 如何禁用展开的.item中的可点击内容？
我正在使用jquery Isotope来创建一个投资组合库，几乎所有东西都按预期工作，我唯一想改变的是打开的内容的行为。 现在当你点击一张照片时，内容框会展开并显示一个带有一些文字的更大图像，问题是当你再次点击内容框（.item）时，内容会恢复到原来的大小，我不想要因为某些盒子包含多个带有colorbox的图像。
最好的解决方案是在’大’容器上添加一个关闭按钮，而不是使用整个盒子区域，但事实certificate这比我能处理的要多。
这是我用来控制框大小和点击检测的代码：
$(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 }, 任何想法如何在点击时停止“大”框关闭并添加一个按钮来关闭它而不是整个框？
提前致谢！！
好吧，我终于有了这个工作，所以我将分享我对代码所做的更改; 可能不是最好的，但它有效。 它可能对某人有用，所以你去。
这段代码正在缩小它的原始大小：
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，它就不会resize，直到你点击另一个.item，无论你点击大盒子多少次它都会保持不变！ 所以现在我可以将几个图像添加到一个盒子中，并使用Lightbox或Colorbox打开它们而不用我的同位素.item.large缩小！ ：d
我认为， 这是一个很好的解决方案。 基本上，您可以使每个Isotope元素中的任何div成为可单击的“最大化”或“最小化”元素; 像一个按钮，一个区域，一个图标，一个链接或其他什么。 并且，您不必担心会遇到像event.stopPropagation（）这样的jQuery方法。