仅使用CSS3显示/隐藏元素 - 为什么这不起作用？

我正在开发一个离线的网络应用程序，（目前）只针对iPhone/iPod上的Safari。主要是为了好玩，但也作为减少我对jQuery事件绑定的依赖（并因此希望加快UI响应速度）的一种方式，我尝试用一些CSS3代替基本的显示/隐藏功能。仅使用CSS3显示/隐藏元素 - 为什么这不起作用？

下面的代码是在Firefox 3.6.3，但不是在最新的Safari浏览器的工作原理，台式机和移动一个简单的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css"> 
    input:not(:checked) ~ select { display: none; } 
    input:checked ~ select { display: inline; } 
    </style> 
</head> 
<body> 
    <input type="checkbox" id="cb" /> <label for="cb">Toggle select</label> 
    <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

我是不是真的希望这个工作，但我很高兴看到它，至少在Firefox中。任何想法为什么它不适用于Safari？其中，<select>最初是隐藏的，这是正确的，并且Web Inspector告诉我在每次单击复选框时都会设置正确的显示值，但该元素无法显示。

我已经完成了一个类似的成功实验，其中我将中的文本包装在<a href="#sel>标记中并使用select:target { display: inline; }规则，但这不是我最终期望的行为。

我是否过分了？这种东西最好留给Javascript吗？

来源

2010-04-15 Jake Krohn

我会说这是努力去做一些你可以在js中轻松做到的事情..用户界面的响应增益可能不足以保证失去理智，试图使这种工作正常工作所有时间，特别是如果你试图变得更复杂：D – Jeriko 2010-04-15 16:00:57

我没有花太长时间看着这一点，但它的工作，原则上，如果你把它简化一点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css"> 
    input:not(:checked) + select { 
     display: none; 
    } 
    input:checked + select { 
     display: inline; 
    } 
    </style> 
</head> 
<body> 
    <input type="checkbox" id="cb" /> 
    <select id="sel"><option value="">Select Box</option></select> 
</body> 
</html>

在你的榜样，我认为它的兄弟选择是不工作 - ：检查和：不（：检查）似乎工作正常。上面的例子在Safari 4.0.4中适用于我。

但我建议这是一个太公平的步骤。 Ulitmately CSS是一种演示技术，通过采用这种方法，您可以将演示文稿与功能问题混合在一起......对于我个人而言，我会在Javascript中执行此操作。

来源

2010-04-15 16:16:48 dannywartnaby

嗯，那怎么样？兄弟选择器（'〜'）在页面初始加载时工作，但不适用于后续事件。标签的损失很糟糕，但如果我决定使用它，我可以找出解决办法。谢谢！ – 2010-04-15 17:05:47

因此，“绕过”，我的意思是做一些像删除'标签'标签，但保持文本内。如果这个匿名内联框可以点击，那将会非常棒，但我猜这就是'label'标签的用途。 :) – 2010-04-15 17:21:25

仅使用CSS3显示/隐藏元素 - 为什么这不起作用？

回答

相关问题