Question

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

我使用了jquery UI手风琴和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而无需打开手风琴的窗格。

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

1 个答案: