使用+和 - 展开/折叠

Question

嘿我正在寻找创建一个可扩展/折叠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>

谢谢：）

Answer 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会更小更容易编写

Answer 2

只需使用其他切换功能（或编辑您拥有的功能）即可在+和-之间切换。使用段落元素（或类似）来保存+和-。