javascript - 如何使用 JavaScript 展开/折叠网站的一部分并更改图像

Question

编辑#1

感谢 2 位回复的用户，他们的解决方案非常有效!我在原来的帖子中忘记提到的是，有没有办法调整用户的 View ，以便当用户折叠展开的部分时，他们的“ View ”(或实际的网页)可以调整到锚定点？

原始帖子

我想先折叠网站的一部分，并且用户无法查看该部分。然后，当他们点击屏幕上的箭头时，隐藏的内容将显示，并且图像需要从“向下”箭头更改为“向上”箭头。

我现在可以使用下面的代码来做到这一点，但我必须有两个箭头。任何人都可以帮忙，让我在屏幕上只有一个箭头，并且它会根据用户单击它的时间而变化吗？我还希望用户能够无限次地执行此操作(即，如果用户单击“向下”箭头，该部分将展开并且箭头更改为“向上”箭头，但是当用户单击“向上”箭头时点击“向上”箭头，该部分会折叠，并且箭头变回“向下”箭头。可能吗？

<script language="JavaScript" type="text/javascript">
<!--
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
// -->
</script> 
<br>

<a href="javascript:sizeTbl('none')"><img src="up_arrow.png"></a> 

<a href="javascript:sizeTbl('block')"><img src="down_arrow.png"></a>

感谢您的帮助!

Answer 1

我已经添加了您的代码并为您创建了一个 jsfiddle...

更改的代码:-

function sizeTbl(h) {

    var tbl = document.getElementById('container');
    tbl.style.display = h;
    if (h == "block") {
        document.getElementById('down').style.display = 'none';
        document.getElementById('up').style.display = 'block';
    } else {
        document.getElementById('up').style.display = 'none';
        document.getElementById('down').style.display = 'block';

    }
}

工作示例:- 点击查看示例:- http://jsfiddle.net/XUjAH/1089/

谢谢