javascript隐藏/取消隐藏，但希望在隐藏/取消隐藏时有一个向下/向上的箭头_Javascript

javascript隐藏/取消隐藏，但希望在隐藏/取消隐藏时有一个向下/向上的箭头

javascript

javascript隐藏/取消隐藏，但希望在隐藏/取消隐藏时有一个向下/向上的箭头,javascript,Javascript,我有一个使用简单JavaScript的简单隐藏/取消隐藏div部分。我需要有一个箭头图像，它将在单击时切换内容的可见性，我希望小箭头在内容隐藏和取消隐藏时在右/下位置之间切换 HTML内容： <a href="javascript:showOrHide();"><img src="Image_Files/Copyright.png" alt="BioProtege Inc" border="0" /></a> <img src="Image_Files

我有一个使用简单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在两个箭头之间更改图像的

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>


函数showOrHide（）
{
var div=document.getElementById（“showorhide”）；
如果（div.style.display==“块”）
{
document.getElementById（“img arrow”）.src=“Image\u Files/arrow hidden.jpg”；
div.style.display=“无”；
}
其他的
{
div.style.display=“块”；
document.getElementById（“img arrow”）.src=“Image\u Files/arrow showing.jpg”；
}
}
版权所有2012+BioProtege-Inc.Net | LG Fresh Designz


联系我们@Lane。Gross@Edu.Sait.Ab.Ca

即使已经接受了答案：）
另一种方法是使用Google的jQuery旋转（本例只需要“向上箭头”图像）：


$（文档）.ready（函数（）{
var值=0
$（“img”）。单击（函数（）{
$（“#显示隐藏”）.toggle（）；
数值+=180；
$（this.rotate（{animateTo:value}）；
});
});
版权所有2012+BioProtege-Inc.Net | LG Fresh Designz


联系我们@Lane。Gross@Edu.Sait.Ab.Ca

@user1305810很高兴我能帮忙！

<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>

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var value = 0
     $("img").click(function(){
        $("#showorhide").toggle();   
        value +=180;
        $(this).rotate({ animateTo:value});     
     });
});
</script>
</head>
<body>
<img src="arrow.jpg" alt="BioProtege Inc" border="0" id="myimg" name="myimg" />
<div id="showorhide">
Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz
<br />
Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca
</div>
</body>
</html>