用+和 - 展开/折叠+

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

plus minus expand/collapse

谢谢:)

来源

2013-01-12 adamhuxtable

在附注上，元素标识应该是唯一的。 – danronmoon

这只是为了测试目的，谢谢你！ :) – adamhuxtable

只需使用另一个切换功能（或编辑你有一个），以A +和之间切换 - 。使用段落元素（或类似的）来保存+和 - 。

来源

2013-01-12 21:37:07

我已经得到它的工作，但第一次我点击它它不做任何事之后，它的工作原理我希望它。 – adamhuxtable

我发现你的代码有点难以做好准备，你用id和链接后缀你的元素，它们是元素....也是为什么你只有一个你的+和 - 一个跨度的视觉线索？除非您因某种原因需要它们，否则请删除所有额外空间。 – 2013-01-12 21:54:56

你能发布这种行为的jsfiddle.net吗？ – 2013-01-12 21:59:59

如果你只是想显示/隐藏，为什么不让一个元素显示和一个隐藏？

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

你的按钮/链接只是NEET一点点的造型看起来像你想

BTW。：你可以/应该使用像jQuery的一些框架:)所以你的JavaScript会更小，更容易编写

来源

2013-01-12 22:00:15 FibreFoX

用+和 - 展开/折叠+

回答

相关问题