在 PC 和移动浏览器中运行的隐藏和显示切换

Question

我有一个拨动开关 displays/hides 下一个元素使用 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>

Answer 1

如果我没理解错的话，你可以使用 details and summary 标签（都是 HTML5 中的新标签）。

它在移动和桌面浏览器上得到广泛支持，除了 pseudo-browsers Internet Explorer、Edge 和 Edge Mobile.

好吧，如果我们想确保我们的切换功能在真实和 pseudo-browsers 上都能正常工作，那么 JavaScript 就派上用场了。（抱歉jQuery，这次不行。下次你可以拯救世界。）

有JavaScript没有jQuery

的解决方案

备注：

使用锚元素 (a) 不是一个好主意，因为它具有另一种语义和功能含义。例如，您可以使用 button 元素，它在语义和功能意义上都更合适。但是，因为要使按钮看起来更好，还需要做一些额外的工作，所以我只是将 a 替换为 div 元素。您还可以使用 cursor: pointer CSS 属性来实现 div 与 a 相同的视觉效果。
您应该避免模棱两可的命名变量。为了将来更好的可读性和更容易的维护，请始终为您的变量命名。
我将函数 toggleSwitch 重命名为 toggleNext，因为它更详细地说明了按钮的用途。此外，如果您想通过 event.target

Java Script Events

toggleNext 函数有一个额外的可选参数 display。默认为 block，用于设置下一个兄弟元素的可见显示状态。它应该给你更多的游戏空间，因为你可以简单地传递任意兄弟元素的显示值，比如 toggleNext(event, 'grid')
在toggleNext(event, display)函数中，我们首先从我们的引用元素（event.target）中获取siblingElem，然后检查它是否显示属性具有 'none' 值，如果是，那么我们需要通过简单地为该元素分配一个新的显示值来切换状态。
初始状态siblingElem.style.display的值为null，因此我们检查!siblingElem.style.display，这是第一次需要的
- 在JavaScript中!null和!undefined被解析为truthy
- 有关 truthy and falsy
为了清楚起见，我从您在 OP 中提供的 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;
  }

在 PC 和移动浏览器中运行的隐藏和显示切换

Hide and Show Toggle that Functions in PC and Mobile Browsers

html

javascript

cross-browser

toggle

switch-statement

演示