显示/隐藏以作为手风琴工作
Posted
技术标签:
【中文标题】显示/隐藏以作为手风琴工作【英文标题】：Show/hide to work as accordian 【发布时间】：2014-07-03 12:28:24 【问题描述】：我正在尝试运行代码以单击链接并打开 div。如果我点击另一个链接，上面的链接应该被关闭。点击的应该是一个。
我不能使用 jquery 或除 javascript 或 dojo 之外的任何其他东西。我不知道dojo，但是javascript。
我正在尝试这样：
<ul id="sm">
<li><a href="javascript:void(0);" onclick="toggle_visibility('s');">abc</a></li>
<li><a href="javascript:void(0);" onclick="toggle_visibility('sa');">xyz</a></li>
<li><a href="javascript:void(0);" onclick="toggle_visibility('ss');">def</a></li>
<li><a href="javascript:void(0);" onclick="toggle_visibility('sd');">efg</a></li>
<li><a href="javascript:void(0);" onclick="toggle_visibility('sfd');">Ter</a></li>
</ul>
我正在使用的JS代码
function toggle_visibility(id)
var e = document.getElementById(id);
e.style.display = ((e.style.display!='none') ? 'none' : 'block');
提供 Div 为：
<div id="s" style="display:none"></div>
<div id="sa" style="display:none"></div>
<div id="ss" style="display:none"></div>
一旦我点击它们，它们就会重叠
【问题讨论】：
您不能使用 jQuery 有什么特殊原因吗？因为使用 jQuery 会非常简单。 什么是 div？你有什么问题？真正的问题在哪里？ 客户端不支持jquery，他想使用dojo或javascript plain 编辑问题以添加 div 好的，您已经添加了 div，但是与订单项的代码相关的 div 在哪里？ 【参考方案1】：请尝试以下示例。希望对你有帮助.....:)
<html>
<head>
<style>
.head
border:1px solid #666;
background-color:#f0f0f0;
padding:3px;
cursor:pointer;
.content
border:1px solid #666;
background-color:#fff;
height:100px;
padding:3px;
</style>
<script type="text/javascript">
function hideShoowTab(ctb)
var ptb = document.getElementById("ptbname").value
if(document.getElementById("ptbname").value=="")
document.getElementById("content"+ctb).style.display="block";
else if(ptb==ctb)
if(document.getElementById("content"+ctb).style.display=="block")
document.getElementById("content"+ctb).style.display="none";
else
document.getElementById("content"+ctb).style.display="block";
else
document.getElementById("content"+ptb).style.display="none";
document.getElementById("content"+ctb).style.display="block";
document.getElementById("ptbname").value=ctb;
</script>
</head>
<body>
<div>
<div id="head1" class="head" onclick="hideShoowTab('1')">Head 1</div>
<div id="content1" class="content">Content 1</div>
</div>
<div>
<div id="head2" class="head" onclick="hideShoowTab('2')">Head 2</div>
<div id="content2" class="content" style="display:none;">Content 2</div>
</div>
<div>
<div id="head3" class="head" onclick="hideShoowTab('3')">Head 3</div>
<div id="content3" class="content" style="display:none;">Content 3</div>
</div>
<input type="hidden" id="ptbname" name="ptbname" value="1" />
</body>
</html>
【讨论】：
我没有测试过你的答案，但你能解释一下为什么这行得通吗？ （假设确实如此）。代码只有在被理解的情况下才有用。 上面的例子很容易理解。您只需注意每个 div id，在 onclick 事件上调用 javascript 函数时传递的参数，并注意 javascript 函数逻辑。要测试上面的示例，只需复制代码并将其保存在空白记事本中，然后以 .html 扩展名保存文件并在任何浏览器中运行。 我很清楚如何测试上述代码，我的要求不是针对我，而是为了遵循网站的指导方针。例如，请参阅 Jon Skeet（该网站的主要用户之一）的这篇文章：msmvps.com/blogs/jon_skeet/archive/2009/02/17/… 特别注意这一行：“然而，没有解释的代码很少有用。至少提供一两句话来解释发生了什么。 " 好的，谢谢艾弗里。我理解并尝试按照您的建议。以上是关于显示/隐藏以作为手风琴工作的主要内容，如果未能解决你的问题，请参考以下文章