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

4 に答える 4

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>
于 2012-11-05T21:41:34.203 に答える
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";
    }
}

デモ: http://jsfiddle.net/RRUEY/

于 2012-11-05T21:28:44.033 に答える
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>
于 2012-11-05T21:30:58.297 に答える
1

タグに id を追加したいと思うでしょう。たとえば、次のようになります。

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

次に、このスクリプトを用意します。

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

そしてもちろん、非表示にするときに「もっと見る」に戻す場合も同じです。

于 2012-11-05T21:32:18.013 に答える