javascript隐藏/取消隐藏，但希望箭头指向向下/向上隐藏/取消隐藏

Question

我有一个使用简单 JavaScript 的简单隐藏/取消隐藏 div 部分。我需要一个箭头图像，它会在单击时切换内容可见性，并且我希望小箭头在隐藏和取消隐藏内容时在右/下位置之间切换。

HTML 内容:

<a href="javascript:showOrHide();"><img src="Image_Files/Copyright.png" alt="BioProtege Inc" border="0" /></a> 
<img src="Image_Files/Copyright_Arrow_Hidden.png" alt="Arrow" border="0" />

<div id="showorhide">
Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz
<br />
Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca
</div>

JavaScript 内容:

function showOrHide() 
{
    var div = document.getElementById("showorhide");
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
}

Answer 1

您只需使用简单的 Javascript 在两个箭头之间更改图像的 src 属性，同时更改 display 属性:

<script type="text/javascript">
function showOrHide() 
{
    var div = document.getElementById("showorhide");
    if (div.style.display == "block") 
    {
        document.getElementById("img-arrow").src = "Image_Files/arrow-hidden.jpg";
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
        document.getElementById("img-arrow").src = "Image_Files/arrow-showing.jpg";
    }
}
</script>

<img src="arrow-hidden.jpg" id="img-arrow" alt="" />

<div id="showorhide">
Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz
<br />
Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca
</div>