UI Accordion header 中的 jQuery ColorBox 插件

Question

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

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

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

这是它的设置方式:

<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(); });

但是，我尝试了多种方法来停止传播，但每一次尝试都会破坏 ColorBox。大图像可以正常打开，但在窗口本身，而不是在灯箱中，因为它应该。

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

我真的很感谢这里的任何帮助，这样虽然图像(链接)位于 Accordion 标题内，但单击它会触发 ColorBox 而不是 Accordion 本身。

干杯。

Answer 1

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

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

这就是我所做的，首先我重建了 Accordion 。我保留了拇指，但删除了触发其周围 ColorBox 的链接。然后我将该链接添加到 Pane 中，但位于隐藏的 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 链接不再位于 Accordion 的标题内，我可以单击它们而不影响 Accordion ，因此我现在可以单击拇指打开 ColorBox，而无需打开 Accordion 的 Pane 。