使用 + 和 - 展开/折叠

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

只需使用另一个切换开关 function（或编辑您拥有的切换开关）在+和-之间切换。 使用段落元素（或类似元素）来保存+和- 。