2

展開可能/折りたたみ可能な div を作成しようとしています。次のコードで問題なく動作しますが、最初のクリックでは何も動作しないようです。

<script type="text/javascript">
    function showme(id, linkid) {
        var divid = document.getElementById(id);
        var toggleLink = document.getElementById(linkid);
        if (divid.style.display == 'block') {
            toggleLink.innerHTML = 'Top five loves +';
            divid.style.display = 'none';        }
        else {
            toggleLink.innerHTML = 'Top five loves -';
            divid.style.display = 'block';
        }
    }
</script>

<a id="toggler" onclick="showme('loves', this.id);" href="#">Top five loves</a>
<div id="loves">
<ol>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
        <li>Fourth item</li>
        <li>Fifth item</li>
</ol>
</div>

プラス マイナス 展開/折りたたみ

ありがとう ：）

4

2 に答える 2

2

表示/非表示だけを行いたい場合は、表示する要素と非表示にする要素を 1 つずつ作成してみませんか?

<script type="text/javascript">
    function showTop5(){
        document.getElementById("top5opener").style.display = "none";
        document.getElementById("top5").style.display = "block";
    }
    function hideTop5(){
        document.getElementById("top5").style.display = "none";
        document.getElementById("top5opener").style.display = "block";
    }
</script>
<a id="top5opener" href="javascript:showTop5();">Show Top 5</a>
<div id="top5" style="display:none">
    <a href="javascript:hideTop5();">Hide Top 5</a>
    <div class="yourElements">
        <ol>
            ...
        </ol>
    </div>
</div>

あなたのボタン/リンクは、あなたが望むように見えるように少しスタイリングする必要があります

ところで、あなたはjQueryのようなフレームワークを使うことができます/使うべきです:)あなたのjavascriptは小さくて書きやすいでしょう

于 2013-01-12T22:00:15.737 に答える
1

+aと aを切り替えるには、別のトグル関数を使用する (または持っているものを編集する) だけです-。段落要素 (または類似の要素) を使用して、 and を保持し+ます-。

于 2013-01-12T21:37:07.177 に答える