javascript - 关闭所有打开的div

Question

我有一个包含很多 div 的网站，并且这个 javascript 函数可以通过单击链接来打开它。现在我想添加打开新 div 时关闭所有其他 div 的功能

我还希望可以通过按 esc 键关闭 div。

某人可以帮助我如何完成它吗？

 function toggleDiv(divid){
        var div = document.getElementById(divid);
        div.style.display = div.style.display == 'block' ? 'none' : 'block';
        }
html part:
<a href=javascript:toggleDiv('div_name'); >

Answer 1

我不会编写所有普通的 JS 代码，特别是因为您没有明确禁止暗示 jquery 的建议，所以这里的所有内容都是通用的。以下是我的处理方法:

1) 将“togglediv”类或数据属性元素应用于所有“可切换”div(在大多数情况下，在分配动态功能时，我更喜欢采用数据属性元素的方式，但在这种类型的情况下)如果一个类可能更可取)。

2) 在文档加载时，获取所有这些 div 并将它们存储在一个数组中。

3) 获得数组后，循环遍历它并对数组中的每个 div 应用指向“切换”函数的 onclick。

4) 切换函数应该首先循环遍历该 div 数组，并将“close”类应用于每个元素。您可以使用 CSS 将 display:none 应用于所有分类为“.togglediv.close”的 div。 “.togglediv”类本质上应该是可见的。执行此操作后，它会确保目标 div 没有应用“闭合”类。

5) 将 onkeypress 事件应用于调用“toggle”函数的文档主体(或可能的最具体的元素，例如包装器，如果有的话)。如果您正确地编写了“切换”函数，这样如果没有通过事件传递给它的元素，它知道要关闭循环中的所有DIVS，那么您的转义键功能就已经内置了。

这个伪代码应该足以帮助您入门。如果您需要更多帮助，请告诉我。

专业提示:在这里使用“渐进增强”是一件轻而易举的事情 - 在此代码的文档加载部分中，请务必在获取该数组时循环遍历该数组并将其全部设置为“关闭”(或隐藏或任何类)你想要的)，这样它们默认是隐藏的。不要加载那些处于隐藏状态的元素的文档，因为没有 JS 的用户会看到一个损坏的站点(booooooo!) - 相反，一旦您使用 javascript 加载文档，就使用渐进增强来隐藏 div(yaaaay!)

干杯!