切换Div显示/隐藏

时间:2012-11-05 21:25:47

标签: javascript css html web toggle

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

这很好用,但是当扩展切换时,我希望将“显示更多”标签更改为“隐藏”。有关如何做到这一点的任何想法? CState.innertext =“隐藏”?

4 个答案:

答案 0 :(得分:3)

要获得浏览器兼容性,请创建如下变量:

var text = 'textContent' in document ? 'textContent' : 'innerText';

然后像这样使用它:

CState[text] = "New Text Content";

但似乎您想要更改<a>的标签,而不是<div>。因此,您要对HTML执行此操作:

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

然后再到你的JS:

var text = 'textContent' in document ? 'textContent' : 'innerText';

function ToggleList(anchor, IDS) {
    var CState = document.getElementById(IDS);
    if (CState.style.display != "block") { 
        CState.style.display = "block";
        anchor[text] = "Hide";
    } else { 
        CState.style.display = "none"; 
        anchor[text] = "Show More";
    }
}

DEMO: http://jsfiddle.net/RRUEY/

答案 1 :(得分:3)

函数中的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>

答案 2 :(得分:1)

<a>的引用传递给函数,然后稍微重构函数以根据可见性重新标记它:

function ToggleList(anchor,IDS) {
  var CState = document.getElementById(IDS);
  var isVisible = (CState.style.display == "block");

  anchor.innerHTML = isVisible ? 'Show more' : 'Hide';
  CState.style.display = isVisible ? 'none' : 'block';
}

改变的HTML:

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

答案 3 :(得分:1)

我相信你会想要为标签添加一个id,例如:

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

然后有这个脚本:

var showMoreElement = document.getElementByID('txtShowMore');
showMoreElement.innerHTML = "Hide";

当然,当你隐藏它时,将它设置回“显示更多”也是一样。