隐藏和显示切换PC和移动浏览器中功能
隐藏和显示切换PC和移动浏览器中功能
提问于 2019-05-20 06:37:51
我有一个切换开关，可以使用onclick显示/隐藏下一个元素
function toggleSwitch(z){
var x,a;
x=/(di-0)/i;
if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
switch (a){
case 1:
z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
break;
case 0:
z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
break;
}
}如何编写可能与大多数PC和移动浏览器兼容的JavaScript？
演示
function toggleSwitch(z){
var x,a;
x=/(di-0)/i;
if(x.test(z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue)){a=1}else{a=0}
switch (a){
case 1:
z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-2';
break;
case 0:
z.d.nextElementSibling.attributes.getNamedItem('class').nodeValue='di-0';
break;
}
}.di-0{display:none!important}.di-1{display:inline-block}.di-2{display:block}.di-3{display:grid} <div class="ro">
<a href="#" class="s18 ro tx-1 b119 r100 t-21 p-2 br-5 mv-3" onclick="toggleSwitch({d:this});return false;" title="A latest quote"> Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT</a>
<div class="di-0">Display Some Content</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-23 04:01:23
如果我理解正确的话，您可以使用details和summary标记(这两个标记在HTML5中都是新的)来实现此目的。
它在移动和桌面浏览器上都得到了广泛的支持，除了伪浏览器Internet Explorer、Edge和Edge Mobile。
如果我们想要确保我们的切换功能在真实浏览器和伪浏览器上都能工作，那么JavaScript就是我们的救星。(对不起，jQuery，这次不是。你可以改天再来拯救世界。)
使用不带jQuery的JavaScript的解决方案
备注：
使用锚元素(a)的
- 不是一个好主意，因为它具有另一种语义和功能含义。例如，您可以使用
button元素，它在语义和功能意义上都更适合。但是，由于需要额外的工作来使按钮看起来更美观，所以我只用div元素替换了a。您还可以使用此div的cursor: pointerCSS属性来实现与a相同的视觉效果。 - 您应该避免命名变量不明确。为了更好的可读性和将来的维护，总是给你的变量一个有意义的名字。
- 我将函数
toggleSwitch重命名为toggleNext，因为它告诉了更多关于按钮的用途。此外，如果您想通过event.target - The访问源DOM元素，您可以简单地使用Java Script Events。
toggleNext函数有一个额外的可选参数，称为display。默认情况下是block，用于设置下一个同级元素的可见显示状态。它应该会为您提供更多的空间，因为您可以简单地传递任意兄弟元素的显示值，比如toggleNext(event, display)函数，我们首先从引用元素(event.target)中获取siblingElem，然后检查它的display属性是否具有'none‘值，如果是，那么我们只需要通过为该元素分配一个新的显示值来切换状态。初始状态siblingElem.style.display中的 - 具有值
null，因此我们检查!siblingElem.style.display，这是第一次必需的。
- In JavaScript `!null` and `!undefined` are resolved as `truthy`
- More information about [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
- 为了清楚起见，我从您在操作
中提供的div元素中删除了类(s18 ro tx-1 b119 r100 t-21 p-2 br-5 mv-3)
<div class="ro">
<div class="toggle-button" onclick="toggleNext(event)" title="A latest quote">
Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT
</div>
<div>Display Some Content</div>
</div>/* Display pointer on hover */
.toggle-button {
cursor: pointer;
}
/* Hide the next sibling element - does not matter what type it is */
.toggle-button + * {
display: none;
}function toggleNext(event, display) {
var siblingElem = event.target.nextElementSibling;
if (!siblingElem) return;
display = display || 'block';
if (!siblingElem.style.display || siblingElem.style.display === 'none') {
siblingElem.style.display = display;
} else {
siblingElem.style.display = 'none';
}
}Stackblitz：https://stackblitz.com/edit/emma-toggle-2-1?file=index.html
现在你有了更多的游戏空间，你可以像这样逻辑地将一个切换按钮绑定到另一个切换按钮上：
<div class="ro">
<div class="toggle-button" onclick="toggleNext(event)" title="A latest quote">
Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT
</div>
<div>
Display Some Content
<div class="toggle-button" onclick="toggleNext(event)" title="A latest quote">
Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT
</div>
<div>
Display Some Another Content
</div>
</div>
</div>Stackblitz：https://stackblitz.com/edit/emma-toggle-2-2?file=index.html
不带JavaScript (**<details>**)的解决方案
<details>
<summary> Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT</summary>
Display
Some
Content
</details>
<br>
<details>
<summary>Another entry: Monday, 13 May 2019 ⏱ 19:07 EDT</summary>
<h1>Display some other content</h1>
</details>Stackblitz：https://stackblitz.com/edit/emma-toggle-1-1?file=index.html
此外，您还可以将details嵌套到另一个details标记中：
<details>
<summary> Average Daily Equilibrium Forecast: Monday, 13 May 2019 ⏱ 19:07 EDT</summary>
<details>
<summary>
Display Some Content
</summary>
<h1>Display some other content</h1>
</details>
</details>Stackblitz：https://stackblitz.com/edit/emma-toggle-1-2?file=index.html
最后但并非最不重要的一点是，如果愿意，您可以隐藏默认情况下为<details>标记显示的显示箭头：
/* this is for Chrome */
details summary::-webkit-details-marker {
display:none;
}
/* this is for Firefox */
details summary {
list-style-type: none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56212566
复制相关文章
相似问题
腾讯云开发者
