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

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

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

在您的情况下，当点击链接时，您可以模拟任何会导致您的手风琴达到您想要的对象的任何事件。

Answer 2

通过提供部分标题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" />

Answer 3

从形状中调用JavaScript：

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

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

3 个答案: