jQuery UI手风琴：限制单击标题栏的某部分

Question

假设我有一个相当复杂的 jQuery UI 折叠面板格式化头部，就像这样：

<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-header的div，但仅在单击标题内的某个特定元素时才起作用，也就是说，仅展开其下方的.list-extra-detail div？ 在这种情况下，是.list-basic-details div。请注意，我希望保留图像周围的链接以便实现其自身目的，而不触发手风琴效果。

目前，手风琴效果已按此方式工作，整个标题都是活动的，而我想更改它：

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

欢呼。

- Peter

Answer 1

我通过不同的思维方式解决了这个问题。我仍然使用整个标题栏进行单击并打开面板，但是如果单击头部内的某个特定元素，例如缩略图，则会阻止点击事件。因此，当有人点击缩略图时，手风琴保持关闭状态。

要了解如何解决我的问题，请参阅此不同方法的完整描述： jQuery ColorBox插件在UI手风琴标题中

- Peter