Javascript 用手风琴连接svg rect_Javascript_Html_Css_Svg_Accordion

Javascript 用手风琴连接svg rect

javascript html css svg

Javascript 用手风琴连接svg rect,javascript,html,css,svg,accordion,Javascript,Html,Css,Svg,Accordion,我有一个svg图像，鼠标悬停在四个矩形元素上，手风琴上有四个按钮，用javascript完成。我想通过同时悬停每个元素（一个矩形和一个按钮手风琴）来连接它们，通过单击svg矩形，它将打开一个按钮手风琴，通过单击一个手风琴，它将填充一个矩形。你可以在这里查看我的小提琴：这是我的html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

我有一个svg图像，鼠标悬停在四个矩形元素上，手风琴上有四个按钮，用javascript完成。我想通过同时悬停每个元素（一个矩形和一个按钮手风琴）来连接它们，通过单击svg矩形，它将打开一个按钮手风琴，通过单击一个手风琴，它将填充一个矩形。你可以在这里查看我的小提琴：这是我的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>

还有我的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";
        }
    });
}

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

我试着尽可能按程序进行，因为这似乎是你在JS中想要的。我使用相应的

rect

元素的

id

为阶段按钮添加了值属性，并添加了一个名为

grey

的

类，其属性与悬停时应用的属性相同

让stgInf=document.querySelector（“.stage_info”）；
设svg=document.querySelector（“#stadium”）；
函数onClick（num）{
设acc=stgInf.querySelector（`.accordion:nth类型（${num}）`）；
let panel=附件nextElementSibling；
设rect=svg.querySelector（`rect#${acc.getAttribute（“value”）}`）；
return（）=>{
acc.classList.toggle（“活动”）；
if（acc.classList.contains（“活动”））{
panel.style.display=“块”；
矩形类列表添加（“灰色”）；
}否则{
panel.style.display=“无”；
rect.classList.remove（“灰色”）；
}
}
}
函数悬停（num）{
设acc=stgInf.querySelector（`.accordion:nth类型（${num}）`）；
设rect=svg.querySelector（`rect#${acc.getAttribute（“value”）}`）；
返回（事件）=>{
如果（event.type==“mouseenter”）{
根据类别列表添加（“灰色”）；
矩形类列表添加（“灰色”）；
}如果（！acc.classList.contains（“active”））{
根据类别列表删除（“灰色”）；
rect.classList.remove（“灰色”）；
}
}
}
设accs=stgInf.queryselectoral（“.accordion”）；
设i=1；
对于（让accs的acc）{
设rect=svg.querySelector（`rect#${acc.getAttribute（“value”）}`）；
acc.addEventListener（“点击”，点击（i））；
acc.addEventListener（“鼠标指针”，悬停（i））；
根据附录1（“鼠标出”，悬停（i））；
rect.addEventListener（“单击”，onClick（i））；
直接添加列表器（“鼠标指针”，悬停（i））；
矩形addEventListener（“鼠标出”，悬停（i））；
++一,；
}
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
文本对齐：左对齐；
边界：无；
大纲：无；
过渡：0.4s；
}
.小组{
填充：0 18px；
背景色：白色；
显示：无；
溢出：隐藏；
}
.包装纸{
显示：内联块；
最大宽度：1140px；
保证金：0自动；
宽度：100%；
文本对齐：居中；
}
.stage_信息，
.stage_img{
显示：内联块；
宽度：计算（50%-80px）；
垂直对齐：顶部；
}
直肠{
光标：指针；
z指数：999；
位置：相对位置；
}
灰色
.主动，
.手风琴：悬停，
矩形：悬停{
填充：#ccc；
背景色：#ccc；
指针事件：全部；
}


第一阶段
这里的信息
第二阶段
这里的信息
第三阶段
这里的信息
第四阶段
这里的信息

我的英语不够好。你的答案和密码都说对了。缺少但您不理解的部分（我的错）是：如何将悬停效果（例如，背景色#ccc）同时放在两个不同的元素中：按钮手风琴和svg矩形。希望您现在能理解。因此，要清楚，当其中一个按钮悬停时，除了单击功能外，您希望相应的rect显示为悬停，反之亦然？是的，这就是目标。我试着用你的代码来做，但我的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";
        }
    });
}