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

Question

编辑#1

感谢回复的 2 位用户，他们的解决方案非常有效！我在原帖中忘记提到的是，有没有办法调整用户的视图，以便当用户折叠展开的部分时，他们的“视图”（或实际网页）可以调整到锚点?

原帖

我希望首先折叠网站的某个部分，使其无法被用户查看。然后，当他们点击屏幕上的箭头时，将显示隐藏的内容，并且图像需要从“向下”箭头变为“向上”箭头。

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

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

谢谢

Answer 2

我已经从你的sizeTbl 方法中取出了参数

然后我得到图像的src 属性（注意我已经给它一个ID）。根据src，我们可以显示/隐藏表格并更改图像属性

这是一个jsFiddle

<script language="JavaScript" type="text/javascript">
<!--

    function sizeTbl() {

        var tbl = document.getElementById('tbl');
        var icon = document.getElementById('toggle-table');
        if (icon.src === 'down_arrow.png'){

            tbl.style.display = 'block';
            icon.src = 'up_arrow.png';
        }
        else {
            tbl.style.display = 'none';
            icon.src = 'down_arrow.png';    
        }
    }

// -->
</script> 
<br>

<a href="javascript:sizeTbl()"><img src="down_arrow.png" id="toggle-table"></a>

---

您在问题中添加了一些额外要求。您已标记 jQuery，这是此场景最简单的解决方案。

从您的<anchor> 标记中删除javascript:sizeTbl()。这称为内联 JS，不建议这样做，因为这意味着您将演示代码与业务逻辑混合在一起。

您使<anchor> 标记充当普通锚标记，并在文档的ready 事件中附加点击事件。

function sizeTbl() {
    var tbl = document.getElementById('tbl');
    var icon = document.getElementById('toggle-table');
    if (icon.innerText === 'show') {

        tbl.style.display = 'block';
        icon.innerText = 'hide';
    } else {
        tbl.style.display = 'none';
        icon.innerText = 'show';
    }
}

$(document).ready(function(){
    $('#sizeTbl').on('click', sizeTbl);
});

我创建了一个新的 jsFiddle 来证明这一点。

注意事项：

• 你需要使用 jQuery 才能工作
• 请注意，我已为<anchor> 标签指定了一个ID。这样我就可以在代码中找到它

如果您有任何其他 cmets，那么 SO 的礼仪是提出新问题。否则答案会变得太长太复杂