javascript - 切换Div显示/隐藏

<script type="text/javascript">
    function ToggleList(IDS) {
        var CState = document.getElementById(IDS);
        if (CState.style.display != "block") { CState.style.display = "block"; }
        else { CState.style.display = "none"; }
    }

</script>
<style type="text/css">
    .divInfo
    {
        display: none;
    }
</style>

<p>Text</p>
<a onclick="ToggleList('LT3')">Show More</a>
</p>
<div id="LT3" class="divInfo">
<p>Additional Test</p>
</div>

效果很好，但是当切换开关展开时，我希望将标签“ Show More”更改为“ Hide”。关于如何做到这一点的任何想法？ CState.innertext =“隐藏”？

最佳答案

函数中的CState对象是对DIV的引用。您应该做的是给锚标记一个ID，然后在其中更改文本。

function ToggleList(anchorID, IDS) {
    var CState = document.getElementById(IDS);
    var anchor = document.getElementByID(anchorID);

    if (CState.style.display != "block") {
        CState.style.display = "block";
        anchor.innerHTML = "Hide";
    } else {
       CState.style.display = "none";
       anchor.innerHTML = "Show more";
    }
}

然后，您的锚标记将如下所示：

<a id="listToggle" onclick="ToggleList('listToggle', 'LT3')">Show More</a>