我有一个切换开关,可以使用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>
发布于 2019-05-23 04:01:23
如果我理解正确的话,您可以使用details和summary标记(这两个标记在HTML5中都是新的)来实现此目的。
它在移动和桌面浏览器上都得到了广泛的支持,除了伪浏览器Internet Explorer、Edge和Edge Mobile。
如果我们想要确保我们的切换功能在真实浏览器和伪浏览器上都能工作,那么JavaScript就是我们的救星。(对不起,jQuery,这次不是。你可以改天再来拯救世界。)
使用不带jQuery的JavaScript的解决方案
备注:
使用锚元素(a
)的
button
元素,它在语义和功能意义上都更适合。但是,由于需要额外的工作来使按钮看起来更美观,所以我只用div
元素替换了a
。您还可以使用此div
的cursor: pointer
CSS属性来实现与a
相同的视觉效果。toggleSwitch
重命名为toggleNext
,因为它告诉了更多关于按钮的用途。此外,如果您想通过event.target
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;
}
https://stackoverflow.com/questions/56212566
复制相似问题