从图像映射激活手风琴答案

【问题标题】：Activate accordion from image map从图像映射激活手风琴
【发布时间】：2016-09-26 10:23:31
【问题描述】：

我想从四个互联网浏览器的图像映射中打开一个手风琴。因此，如果有人点击 Firefox，它会在 Firefox 部分下打开手风琴。目前，如果有人点击图像地图中的四个浏览器之一，它会将他们跳转到手风琴中的链接，但它不会打开。然后他们必须自己点击链接。

我尝试了第一条指令on this page，但我无法让它工作。我是 javascript 新手，所以可能只是用户错误。非常感谢任何帮助。

这是 HTML

<!--begin accordion-->  

<a id="IE"></a><button class="accordion">Internet Explorer</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<a id="Firefox"></a><button class="accordion">Firefox</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<a id="Chrome"></a><button class="accordion">Chrome</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<a id="Safari"></a><button class="accordion">Safari</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet...</p>
</div>

<!--end accordion-->`

地图

 <p class="browers"><img src="_assets/browsers.jpg" alt="Top Internet   Browsers" width="375" height="94" usemap="#Map">
    <map name="Map">
    <area shape="rect" coords="13,11,82,86" href="#IE" target="_self" alt="Internet Explorer">
    <area shape="rect" coords="104,12,176,85" href="#Firefox" target="_self" alt="Firefox">
    <area shape="rect" coords="198,12,269,85" href="#Chrome" target="_self" alt="Chrome">
    <area shape="rect" coords="288,13,360,83" href="#Safari" target="_self" alt="Safari">
    </map>
  </p>

脚本

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

【问题讨论】：

标签： javascript jquery accordion imagemap

【解决方案1】：

您可以将 onclick 属性添加到图像映射中的形状。

 <p class="browers"><img src="_assets/browsers.jpg" alt="Top Internet   Browsers" width="375" height="94" usemap="#Map">
    <map name="Map">
    <area onclick="activateAccordion('IE')" shape="rect" coords="13,11,82,86" href="#IE" target="_self" alt="Internet Explorer">
    <area onclick="activateAccordion('Firefox')" shape="rect" coords="104,12,176,85" href="#Firefox" target="_self" alt="Firefox">
    <area onclick="activateAccordion('Chrome')" shape="rect" coords="198,12,269,85" href="#Chrome" target="_self" alt="Chrome">
    <area onclick="activateAccordion('Safari')" shape="rect" coords="288,13,360,83" href="#Safari" target="_self" alt="Safari">
    </map>
  </p>

【讨论】：

谢谢，Gabriel... 我试过了，但不幸的是，它没有任何作用。仍在努力:)。