Question

我有一个有很多div的网站，这个javascript函数通过点击链接打开它。现在我想添加函数以在打开新的时关闭所有其他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）适用于所有＆＃34; togglable＆＃34;划分一个＆＃34; togglediv＆＃34;或者是数据属性元素（在分配动态功能时，我更喜欢采用数据属性元素的方式，但在这种情况下，类可能更可取。）

2）在doc-load上，获取所有这些div并将它们存储在一个数组中。

3）一旦你有你的阵列，循环通过它并应用onclick指向＆＃34;切换＆＃34;函数到数组中的每个div。

4）切换功能应首先遍历该div数组，并应用＆＃34;关闭＆＃34;每个元素。您可以使用CSS将display：none应用于所有被归类为＆＃34; .togglediv.closed＆＃34;的div。＆＃34; .togglediv＆＃34;本质上应该是可见的。在它之后，它确保目标div没有＆＃34;关闭＆＃34;适用于它的类。

5）将onkeypress事件应用于文档正文（或最具体的元素，如你的包装，如你的包装），调用＆＃34;切换＆＃34;功能。如果你写＆＃34;切换＆＃34;正确运行，如果事件没有传递给它的元素，它知道在循环中关闭所有DIVS，那么你的转义键功能已经内置。

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

Protip：使用＆＃34;渐进增强＆＃34;在这个代码的文档加载部分，这是一个微风，当你得到它并确保它们全部设置为＆＃34;关闭＆＃34; （或隐藏或任何你想要的类），以便它们默认隐藏。不要将这些元素加载到隐藏状态，因为没有JS的用户会看到一个破损的网站（booooooo！） - 而是使用渐进增强功能隐藏div，一旦你用javascript加载文档（yaaaay！）

干杯！

Answer 2

HTML元素不一定要设置样式属性（如果它们没有HTML样式属性且没有CSS规则匹配）。

找出元素是否占据屏幕空间的一种方法是测试clientHeight和clientWidth。

对于Esc键，你必须为'keydown'或'keyup'事件类型添加和事件监听器（因为'keypress'不会触发不产生字符的键。）

对于国际键盘，“keydown”或“keyup”返回的值非常不可靠。

我在德语键盘上为'keydown'或'keyup'得到了Esc：

charCode: 0
clipboardData: undefined
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
eventPhase: 0
keyCode: 27
keyIdentifier: "U+001B"
...
type: "keydown"

请注意，charCode为0，但keyCode和keyIdentifier的unicode表示法都报告了Esc键。

http://www.fileformat.info/info/unicode/char/1b/index.htm

关闭所有打开的div

2 个答案: