最佳实践（jQuery、CSS）：如何初始化将切换可见的隐藏元素？

Question

堆栈警告我这是一个主观问题，并且可能很接近，但无论如何我都会尝试这个。

我有一组控制按钮附加到图库中的图片。这些最初是隐藏的，当鼠标悬停在图像上时切换可见。我的问题是：

这些按钮应该设置为隐藏在样式表中还是保持可见并在加载时由 jQuery 隐藏？我想要优雅的降级，所以如果我希望这些在未启用 javascript 的情况下可见，那么在 CSS 中初始化它似乎是一个坏主意。

除此之外，我使用 Ajax 来加载这些图像的页面。如果我使用 jQuery hide 执行此操作，它不会影响从 ajax 请求加载的内容，因为它仅在 $(document).ready() 上触发。我尝试过使用 live('ready')，但了解到 live() 不支持该事件。

那么对于这样的事情，最佳实践是什么？看起来无论哪种方式都有很多优点和缺点（css 与 document.ready），如果它们被默认 CSS 隐藏，按钮将通过 ajax 分页正常切换。但如果未启用 JavaScript，按钮的功能将会丢失。有人对此有建议吗？

注意：我最初没有提到它，但它很重要。我目前正在使用 fadeToggle() 来完成我的转换，这可能是使整个问题复杂化的原因。到目前为止，所有解决方案似乎都有效，但在引入衰落时效果就不那么好了。

Answer 1

如果您尝试更改通过 Ajax 加载的元素的样式，则几乎就像您尝试击中移动目标一样。我将在样式表中创建两个声明 - 一个用于隐藏，一个用于可见 - 然后根据附加到 body 标记（或任何其他包含标记）的类来切换它们。

像这样：

body .mybutton {
  display:block;
}

body.loaded .mybutton {
  display:none;
}

然后在您的 JS 文件中：

$(document).ready(function() {
  $('body').addClass('loaded');
});

这样，任何具有类名 mybutton 的元素（当前和未来）都将应用适当的样式。

Answer 2

您最初使用 display:none; 使用 CSS 隐藏，然后使用 jQuery 的toggle() 再次显示和隐藏。这是最好的方法。至于没有启用 JavaScript 的人，我不会担心这一点。他们占用户的 1%。每个人都启用了 JavaScript。

检查工作示例 http://jsfiddle.net/znJxh/