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

Question

我已经搜索遍了，但还没有找到我的特定问题的答案。

我有一个简单的 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# 激活外部链接的一个部分，但我需要在不重新加载页面的情况下实现这一点。

Answer 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 -->

在您的区域 标签，您可以添加 onclick 属性，如下所示：

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

Answer 2

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

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

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

Answer 3

从形状调用 JavaScript：

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