我有一个svg图像，它的鼠标悬停在四个rect元素上，而手风琴具有四个用javascript完成的按钮。我想通过同时悬停每个元素（矩形和按钮手风琴）来连接每个元素，然后单击svg rect它将打开按钮手风琴，单击手风琴将填充一个矩形。您可以在这里查看我的小提琴：https://jsfiddle.net/pfrutuoso/zcsj8g05/2/这是我的html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="stage_info">
<button class="accordion">Stage 1</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 2</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 3</button>
<div class="panel">
<p>Information here..</p>
</div>
<button class="accordion">Stage 4</button>
<div class="panel">
<p>Information here..</p>
</div>
</div>
<div class="stage_img">
<map id="big_stage">
<svg version="1.1" id="stadium" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100%" height="100%" viewBox="0 0 456.122 451.02" enable-background="new 0 0 456.122 451.02"
xml:space="preserve">
<rect id="stage4" x="25.51" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage3" x="230.612" y="25.51" fill="#1C6131" width="200" height="200"/>
<rect id="stage2" x="25.51" y="229.592" fill="#1C6131" width="200" height="200"/>
<rect id="stage1" x="230.612" y="229.592" fill="#1C6131" width="200" height="200"/>
</svg>
</map>
</div>
</div>
</body>
</html>
我的CSS：
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.wrapper {
display: inline-block;
max-width: 1140px;
margin: 0 auto;
width: 100%;
text-align: center;
}
.stage_info,
.stage_img {
display: inline-block;
width: calc(50% - 80px);
vertical-align: top;
}
rect {
cursor: pointer;
z-index: 999;
position: relative;
}
rect:hover {
fill: #ccc;
pointer-events: all;
}
还有我的javascript：
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
我不太确定您对问题的这一部分的意思，所以我将这一部分保留下来。
我想通过同时悬停它们来连接每个元素
这是我实现的部分：
通过单击一个svg rect它将打开一个按钮手风琴，并且通过单击一个手风琴将填充一个rect。
我试图尽可能地在程序上做到这一点，因为这似乎是您在JS中追求的。我使用对应的id元素的rect向您的舞台按钮添加了值属性，并添加了一个class，其名称与悬停时所应用的属性相同。
greylet stgInf = document.querySelector(".stage_info"); let svg = document.querySelector("#stadium"); function onClick(num) { let acc = stgInf.querySelector(`.accordion:nth-of-type(${num})`); let panel = acc.nextElementSibling; let rect = svg.querySelector(`rect#${acc.getAttribute("value")}`); return () => { acc.classList.toggle("active"); rect.classList.toggle("grey"); if (acc.classList.contains("active")) { panel.style.display = "block"; } else { panel.style.display = "none"; } } } let accs = stgInf.querySelectorAll(".accordion"); let i = 1; for (let acc of accs) { acc.addEventListener("click", onClick(i)); svg.querySelector(`rect#${acc.getAttribute("value")}`) .addEventListener("click", onClick(i)); ++i; }.accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; } .wrapper { display: inline-block; max-width: 1140px; margin: 0 auto; width: 100%; text-align: center; } .stage_info, .stage_img { display: inline-block; width: calc(50% - 80px); vertical-align: top; } rect { cursor: pointer; z-index: 999; position: relative; } rect.grey, rect:hover { fill: #ccc; pointer-events: all; }
请让我知道我是否做过一些令人困惑或误解的问题。