javascript隱藏/取消隱藏，但想要一個箭頭指向/隱藏/取消隱藏

我有一個簡單的隱藏/取消隱藏div部分使用簡單的JavaScript。我需要有一個箭頭圖像，點擊時會切換內容的可見性，並且我希望當內容被隱藏和取消隱藏時，小箭頭可以在右/下位置之間切換。javascript隱藏/取消隱藏，但想要一個箭頭指向/隱藏/取消隱藏

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 @ [email protected] 
</div>

JavaScript內容：

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

來源

2012-07-09 user1305810

你只想用簡單的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 @ [email protected] 
</div>

來源

2012-07-09 02:38:13

感謝的人，工作就像一個魅力！ – user1305810 2012-07-09 02:48:18

@ user1305810很高興能幫到你！ – 2012-07-09 02:49:23

即使答案已經接受了:)
另一種方法是使用谷歌的jQuery的旋轉（你只需要「向上箭頭」的形象在這個例子中）：

<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 @ [email protected] 
</div> 
</body> 
</html>

來源

2012-07-09 09:54:25 alfasin

javascript隱藏/取消隱藏，但想要一個箭頭指向/隱藏/取消隱藏

回答

相關問題