使用外部按钮/图像触发手风琴，反之亦然

Question

我有一些图像在点击事件中打开了它们各自的手风琴文本，我正在使用此代码，并且运行良好：

脚本

$('#openfirst').click(function() {
  $(".accordion").accordion({
    active: 0
  });
});
$('#opensecond').click(function() {
  $(".accordion").accordion({
    active: 1
  });
});

HTML

<div class="large-3 columns">
    <p id="openfirst">
      <img class="imgs" id="img1" />
    </p>
</div>

等等。。。

当你点击图像时，它会变为另一个图像，我使用这个代码，并且工作得很好：

脚本

var imgactive = $('.imgs');
imgactive.on('click', function(){
    imgactive.removeClass('active');
    $(this).addClass('active');
});

这种情况是手风琴本身非常完美，图像被链接到手风琴上，并且也在工作（点击图像>图像背景发生变化，其相应的手风琴打开），我的问题是我不知道如何将手风琴与图像链接，因此在点击手风琴的情况下，其相应图像也会发生变化。

谢谢你的阅读，如果你能帮忙的话。。太棒了！

Answer 1

您可以使用activate事件，以便根据新展开的面板更改按钮图像/状态；文件：

激活面板后触发（动画后完成）。如果手风琴先前已折叠，则ui.oldHeader和ui.oldPanel将是空的jQuery对象。如果手风琴是折叠时，ui.newHeader和ui.newPanel将为空jQuery对象。

代码：

$(function () {
    $("#accordion").accordion({
        activate: function (event, ui) {
            alert($(ui.newHeader).attr("id"))
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/7Ak94/1