jQuery Accordion 选项卡 - 链接到站点，而不是页面内容

Question

目前我的 jQuery Accordion 上有 5 个选项卡。单击它们会使内容看起来像人们期望的那样。但是，我还想包括指向外部站点的链接。为了保持风格不变，我想让它们看起来也像 Accordion 。我可以让内容包含一个链接，上面写着点击这里，但我宁愿它只是一个外部链接。我能够使用 UI 小部件并从 Accordion 中添加样式以使其匹配，但是我遇到了两个问题。首先是 UI-Widget 选项卡不像 Accordion 选项卡那样具有鼠标悬停效果。第二个是 UI-Widget 选项卡中的文本不会与其他选项卡对齐(当浏览器中的文本大小增加时，也会看到它是相同的。)

<a href="http://apple.com/">
<div class="ui-widget" style="margin: 0px 20px;">
    <div class="ui-state-default ui-corner-all" style="margin: 0px; padding: .5em;">
        <h3 class="ui-helper-reset" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1"><span class="ui-icon ui-icon-extlink" style="float: left;"></span><a href="#">Apple</a></h3></div>
</div>
</a>

Answer 1

一种方法是将单独的 click 事件附加到链接元素:

$("#linkId").click(function() {
    window.location.href = "http://apple.com/";
});

这样一来，其余功能将保持不变，并且您可以获得一个外部链接。参见 jsFiddle了解更多。

更新

如果您不想要此链接的默认 Accordion 行为，您可以关闭所有其他可能影响它的 click 事件。像这样的东西:

$("#linkId").parentsUntil("#accordion").off("click");

参见 jsFiddle .