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

如果您只想显示/隐藏，为什么不制作一个显示和隐藏的元素？

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