Javascript div 不堆叠

Question

我有一些 div 框，当您单击链接时，它会替换现有框，而不是在其下方堆叠一个新框。
最好向您展示而不是解释。

或者至少我会，但创建一个 jsfiddle 不会复制我在我的网页上看到的内容。
我的网页是 Intranet，所以我无法共享。

这是 fiddle :http://jsfiddle.net/GR6pu/

(当我尝试发帖时，我被要求附上带有一些代码的 jsfiddle.net 链接。
不太确定需要什么，所以我会发布这个:)

var showed = 'com1';
function com(id) {
    if (showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    }
    document.getElementById(id).style.display = 'block';
    showed = id;
}

希望发生的是:

你从社区盒子开始。
当您点击“lam”时，您会在其下方看到一个框 =“lam 事件”。
如果您随后单击"dispatch"，则此“lam activites”框将替换为“调度事件”。
这个位与我在 fiddle 中发布的内容在我的网站上运行良好。

然后，在“lam activities”中，如果您单击“t45”，您应该在其下方看到另一个框，但在我的网站上，“t45”框取代了“lam activities”框，而不是在其下方堆叠另一个框。

我的目标是将“t45”框堆叠在“lam 事件”框下方。

通过阅读论坛上的其他主题，我知道您喜欢您的海报详细说明他们的尝试...
我对基于网络的所有事物的了解很少。
4 周前我从未创建过网站，我已经设法自学了足够的 HTML 和 CSS 来创建一个可用的网站，但 Javascript 对我来说仍然是新手，因此我没有知识来摆弄 js 来制作它的工作。
我尝试将 none 更改为阻止，但这会创建比我想要的更多的框。

谢谢，克里斯蒂安

Answer 1

When you click 'lam' you get a box below it = 'lam activities'.

Then, in 'lam activities' if you click 't45' you should get another box below it, but on my website the 't45' box replaces the 'lam activities' box rather than stacks another below it.

my goal is to have the 't45' box stacked underneath the 'lam activities' box.

总体而言，您遇到了 2 个问题，HTML 无效，因为缺少结束标记并且您的代码不正确，因此它不会显示预期的元素。

---

修复您的 HTML

---

您的演示 fiddle 一开始就坏了，无法证明您遇到的问题。

您无法显示 lam1如果lam1元素在 com2 内你仍然隐藏的元素display: none ，请点击t45后检查您的HTML :

---

---

您最终使用不正确的嵌套 HTML 的原因是缺少结束标记，从而创建无效的 HTML。

全部<a>标签缺少匹配 </a>结束标签。

所有主div标签，例如 <div id="com1"..> , <div id="lam1"..>等.. 缺少匹配的 </div>结束标签。

浏览器会尝试最佳猜测，在最合适的地方添加结束标记，因此您最终可能会得到意想不到的 HTML，例如兄弟元素变成嵌套。

编辑:</a>不需要(我的错)，只有第三个 </div>每个部分都缺少。我更新了 fiddle 并发布了代码以反射(reflect)这一点

---

DEMO - 添加缺少的结束标记修复了演示，现在显示了您遇到的问题。

---

修复代码

---

现在缺少的结束标记已添加，修复了 fiddle 中的 HTML，现在可以正常工作并显示问题，我们可以修复您的代码。

您的第二个函数将始终隐藏 t45元素，然后显示任务元素，因此它“替换”了它。我假设您需要类似的功能，即在您单击不同的“任务”时替换任务元素。

在那种情况下你不能使用 showed id 但需要单独记录任务 id(或者你想怎么调用它)

function lam(id) {
    // this removes the t45 element you want to keep
    // I'm assuming you want to track clicked lams separately
    if (showed && showed !== id) { 
        document.getElementById(showed).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    showed = id;
}

将其更改为以下内容，两个元素都可见。: 变种任务ID;

function lam(id) {
    if (taskId && taskId !== id) {
        document.getElementById(taskId).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    taskId = id;
}

---

DEMO - 修复代码。

---

这是固定的 HTML 和来自上面 fiddle 的完整性代码。

HTML:

<div class='whitebox'>
    <div class='subheader'>community</div>
    <div class='links'> 
        <a onclick="com('com1');"><div class='boxlink'>LAM</div>
        <a onclick="com('com2');"><div class='boxlink'>DISPATCH</div>
        <a onclick="com('com3');"><div class='boxlink'>PLANNING</div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="com1" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>lam activities</div>
        <div class='links'>
            <a onclick="lam('lam1');"><div class='boxlink'>T45</div>
            <a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
            <a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
            <a onclick="lam('lam4');"><div class='boxlink'>IND</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="com2" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>dispatch activities</div>
        <div class='links'>
            <a onclick="lam('lam2');"><div class='boxlink'>SYNC</div>
            <a onclick="lam('lam3');"><div class='boxlink'>ESSS</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="lam1" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>t45 tasks</div>
        <div class='links'> 
            <a onclick="t45('t451');"><div class='boxlink'>REMOVAL</div>
            <a onclick="t45('t452');"><div class='boxlink'>ADJUST</div>
            <a onclick="t45('t453');"><div class='boxlink'>RECEIPT</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

<div id="lam2" style="display:none">
    <div class='whitebox'>
        <div class='subheader'>sync tasks</div>
        <div class='links'> 
            <a onclick="t45('t451');"><div class='boxlink'>emea</div>
            <a onclick="t45('t452');"><div class='boxlink'>namer</div>
            <a onclick="t45('t453');"><div class='boxlink'>s asia</div>
            <a onclick="t45('t454');"><div class='boxlink'>n asia</div>
        </div>
    </div>
</div> <!-- closing </div> was missing -->

JavaScript:

var showed = 'com1'; 变种任务ID;

function com(id) {
    if (showed && showed !== id) {
        document.getElementById(showed).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    showed = id;
}

function lam(id) {
    if (taskId && taskId !== id) {
        document.getElementById(taskId).style.display = 'none';
    }

    document.getElementById(id).style.display = 'block';
    taskId = id;
}