Javascript js切换和按钮

我制作了这个JS扰流板，如果我只有一个下拉框，效果很好，但是如果我尝试在页面中添加多个扰流板，当我点击第二个扰流板链接时，它会打开第一个扰流板。然后，我将第二个链接的id“hidden”改为“hidden2”，它按照我希望的方式工作。 问题在于链接图像，我使用它作为扰流板的打开和关闭按钮。（当我点击图片时，我希望它改变为其他图片。）所以，当我点击一个按钮打开扰流板时，第一个扰流板按钮和第二个扰流板按钮上的图片都会改变。。。。 这是为了理解我的意思。。点击第二个按钮

function toggle(element) {
    if (document.getElementById(element).style.display == "none") {
    document.getElementById(element).style.display = "";
    document.getElementById("drop").src="/drop_up.png";

    } else {
    document.getElementById(element).style.display = "none";
    document.getElementById("drop").src="/drop_down.png";

    }
    } 


    <a href="javascript:toggle('hidden')"><img  id="drop" width="25px" src="/drop_down.png" /></a>
    <div id="hidden" style="display:none;">
    Box content
    </div>

功能切换（元素）{
if（document.getElementById（element.style.display==“无”）{
document.getElementById（element.style.display=”“；
document.getElementById（“drop”）.src=“/drop\u up.png”；
}否则{
document.getElementById（element.style.display=“无”；
document.getElementById（“drop”）.src=“/drop\u down.png”；
}
} 
盒子内容

发生这种情况是因为：

document.getElementById("drop").src

---

这是模棱两可的。页面上不应该有两个ID相同的元素-如果有多个同名实例，请使用类。Javascript只是在搜索，直到找到“drop”id的第一个实例，然后停止

因为在JS中，src正在更改，您选择的是ID:drop，但浏览器选择了第一个ID为的元素。您尝试过jQuery吗？它可以使您的代码更简单。