UI 手风琴标头中的 jQuery ColorBox 插件

Question

首先，这就是我想要实现的目标：我有一个带有图像拇指和一些基本信息的对象列表。您可以单击图像来查看图像的大图，或者单击对象信息上的任何其他位置来展开一个 DIV，其中包含有关该对象的大量额外信息。

我将 jquery UI Accordion 和 yoxview 结合起来使用，但是 yoxview 在几个浏览器中给我带来了很大的痛苦，所以我决定用 ColorBox 替换它。

现在问题来了，我可以正常工作，但是当单击图像时，ColorBox 会按应有的方式打开，但它也会触发手风琴，当然，它不应该触发。因为，例如，如果您单击“打开”额外信息，然后单击拇指查看放大的图像，手风琴就会关闭，这确实使导航和检查这些对象变得非常痛苦，而不是轻而易举。

这就是它的设置方式：

<div id="list-accordion">
  <div class="list-accordion-header">
    <span class="list-thumb-container">
      <a href="someplace_thumb.jpg" title="some title" class="group1">
        <img src="somplace_large.jpg" />
      </a>
    </span>
    <div class="list-basic-details">
      The basic explanation comes here
    </div>
  </div>
  <div class="list-extra-detail">
    All the rest of the information in the panel of the accordion
  </div>
</div>

在准备好的文档中，我有这个：

$("#list-accordion").accordion(
    {
        icons: false ,
        autoHeight : false ,
        active: false ,
        header: '.list-accordion-header' ,
        collapsible: true
    }
);

对于 ColorBox：（

$(".group1").colorbox({rel:'group1'});

我使用 rel 因为一个对象可能有多个图像，我简化了我的 html 示例）

为了确保当单击图像后，我通常会使用这一行的代码：

$(".group1").click(function(e){ e.stopPropagation(); });

但是，我已经以多种方式尝试了 stopPropagation，但每一次尝试都会破坏 ColorBox。大图像可以正常打开，但在窗口本身中打开，而不是在灯箱中打开。

简而言之，我知道有一个与 yoxview 不同的灯箱可以跨浏览器工作，但我有一个不需要的副作用，即单击图像会触发手风琴。

我真的很感谢这里的任何帮助，这样虽然图像（链接）位于手风琴标题内，但单击它会触发 ColorBox，但不会触发手风琴本身。

干杯。

Answer 1

好吧，我花了一段时间，但我解决了这个问题。我并不是说这个解决方案非常干净，它似乎有效，并且可以跨浏览器。

我的解决方案的关键是从手风琴的标题中删除 ColorBox 链接。然而，我仍然想要在该标题内有一个拇指，用户可以单击打开图像的放大版本（并在 ColorBox 中浏览到其他图像（如果可用）），而无需打开手风琴窗格！

这就是我所做的，首先我重建了手风琴。我保留了拇指，但删除了触发其周围 ColorBox 的链接。然后我将该链接添加到窗格中，但位于隐藏的 div 中。

<div id="list-accordion">
  <div class="list-accordion-header">
    <span class="list-thumb-container">
        <img src="somplace_thumb.jpg" class="img-thumb" rel="group1"/>
    </span>
    <div class="list-basic-details">
      The basic explanation comes here
    </div>
  </div>
  <div class="list-extra-detail">
    <div class="hidden-img-links">                       
      ** all my  image links in this format **
     <a class="group1" href="somplace_large.jpg" title="some text">name</a>
    </div>
    All the rest of the information in the panel of the accordion
  </div>
</div>

现在，我在准备好的文档中使用以下 js 代码：

$('a.group1').colorbox( {rel: group1});     

$(".img-thumb").click( function( event ){
    $( '.' + $(this).attr('rel') + ':first' ).click();
    return false;
})

// of het nu items of veilingen bevat, de item accordion moet opgestart
$("#list-accordion").accordion(
    {
        icons: false ,
        autoHeight : false ,
        active: false ,
        header: '.list-accordion-header' ,
        collapsible: true
    }
);

如您所见，我捕捉到拇指上的点击并阻止它，这样它就无法向上冒泡到父级。但在实际阻止之前，我会向我想要在 ColorBox 中打开的第一张图像发送一次单击。由于这些 ColorBox 链接不再位于手风琴的标题内，我可以单击它们而不影响手风琴，因此我现在可以单击拇指打开 ColorBox，而无需打开手风琴的窗格。