显示/隐藏以作为手风琴工作答案

【问题标题】：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 在哪里？

标签： javascript html dojo

【解决方案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/… 特别注意这一行：“然而，没有解释的代码很少有用。至少提供一两句话来解释发生了什么。 "
好的，谢谢艾弗里。我理解并尝试按照您的建议。