javascript - 如何在不重新加载页面的情况下下拉 Opera Mini 上的菜单或任何内容？

Question

在 Opera Mini 上，我们是否可以在不重新加载页面的情况下下拉菜单或其他内容？我知道如何通过使用 :target CSS 重新加载页面来下拉菜单，但我正在寻找一种不重新加载页面的解决方案。我看到某些网站这样做。

有时，我觉得 Opera Mini 就是新的 IE8。我希望不使用任何像 jquery 这样的库并且具有零依赖性。

Answer 1

鉴于 JavaScript doesn't run on the device，我相当确定您无法使用 JavaScript 完成此操作，它在 Opera Mini 服务器上运行。

不过，这里有一个古老的 CSS 复选框技巧；它相对基本，但这并不意味着 Opera Mini 无论如何都不会把它搞砸。它的工作方式是你有一个标签连接到一个隐藏的复选框。单击标签可切换复选框。您使用相邻的兄弟组合器和 :checked 伪类仅在选中复选框时显示另一个元素:

label {
  cursor: pointer;
}
/* hide the checkbox */
.hidden-cb {
  display: none;
}
/* By default, this is not shown */
.show-on-checkbox {
  display: none;
}
/* But if it's immediately after a checked checkbox, we show it */
input:checked + .show-on-checkbox {
  display: block;
}

<label for="hidden-cb">Click me</label>
<input type="checkbox" id="hidden-cb" class="hidden-cb">
<div class="show-on-checkbox" id="target">Hey, here I am!</div>

它不必只是一个简单的出现/消失的事情，您可以做任何 CSS 允许 Opera Mini 支持的事情。

我正要建议将 :hover 技巧作为替代方法，但在 Opera Mini 上，99% 的用户将使用他们的手指...