如何从图像映射href激活jquery手风琴？答案

【问题标题】：How to activate jquery accordion from an image map href?如何从图像映射href激活jquery手风琴？
【发布时间】：2011-07-21 16:55:57
【问题描述】：

我已经搜索了所有内容，但还没有完全找到我的特定问题的答案。

我有一个简单的 jquery 手风琴，我希望能够从内部链接激活特定部分。该链接来自图像映射，因此查看者单击图像的某个区域并激活手风琴的该部分。看起来很简单，但我玩得很开心。

例如我到目前为止：

$(function() {
$( "#myaccordion" ).accordion({
    active: false, 
    autoHeight: false, 
    navigation: true        
});
});

<img src="Map.png" name="map" width="650" height="336" usemap="#hotspot" id="mymap" />

<map name="hotspot" id="hotspot">
    <area shape="poly" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />
    <area shape="poly" coords="155,223,133,194,96" href="#section2" target="_self" alt="section2" />
</map>

<div id="myaccordion">
<h3><a href="#section1">Section 1</a></h3>
<div>
    <p>
    Section 1 content
    </p>
</div>
<h3><a href="#section2">Section 2</a></h3>
<div>
    <p>
    Section 2 content
    </p>
</div>

我知道根据我能够找到的内容，这段代码与它需要的代码相去甚远，但这是我目前能弄清楚的最多的。

根据其他一些线程，我能够获得的最接近的方法是使用 href# 从外部链接激活一个部分，但我需要在不重新加载页面的情况下这样做。

【问题讨论】：

标签： jquery accordion href imagemap

【解决方案1】：

通过为您的部分标题提供id 属性，您可以在它们上简单地click()，它将激活下拉菜单的该部分：

<h3 id="acc_1"><a href="#section1">Section 1</a></h3>
<div>
    <p>
    Section 1 content
    </p>
</div>
<h3 id="acc_2"><a href="#section2">Section 2</a></h3>
.... <!-- and so forth -->

在您的area 标签中，您可以像这样添加onclick 属性：

<area shape="poly" onclick="$('#acc_1').click();" coords="251,125,241,181,287" href="#section1" target="_self" alt="section1" />

【讨论】：

【解决方案2】：

我认为（但我不确定）我知道您想要实现什么。你为什么不使用'trigger'。这将模拟一个事件。例如，如果您想在悬停#objectB 时触发对#objectA 的点击，您可以使用：

$('#obectB').bind('hover', function() {
    $('#objectA').trigger('click');
});

在您的情况下，当单击链接时，您会模拟任何对象上的任何事件，这些事件会导致您的手风琴执行您想要的操作。

【讨论】：

添加事件会破坏图像映射。

【解决方案3】：

从形状调用 JavaScript：

 <area shape="poly" coords="251,125,241,181,287" href="javascript:yourFunction(someVariable)" target="_self" alt="section1" />

【讨论】：