Question

我有一些元素在默认情况下围绕它们有一个CSS3盒子阴影，如果用户打开了javascript虽然我想隐藏盒子阴影。

我目前正在使用下面看到的代码来隐藏其他元素，除了box-shadow之外，这个方法也很有效。我做了一些测试，即将其他代码放在'box-shadow：none'中，并且它总是按预期工作，因此我认为它与CSS3 box-shadow属性和jquery的兼容性有问题。

有人能想出解决这个问题的方法吗？或者也许是另一种在页面加载时关闭box-shadow属性的方法。

提前感谢您的帮助。

$('html').append('<style type="text/css">.sub-menu{width:897px;display:none;} .sub-menu-header{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}</style>');

子菜单标题的CSS

.sub-menu-header{
   -moz-box-shadow: 1px 1px 5px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
   box-shadow: 1px 1px 5px #000;
   border:1px solid #CCC;
   cursor:pointer; 
}

Answer 1

您可以在html标记中添加no-js类：<html class="no-js">

添加样式：

.no-js .sub-menu-header{
   -moz-box-shadow: 1px 1px 5px #000;
   -webkit-box-shadow: 1px 1px 5px #000;
   box-shadow: 1px 1px 5px #000;
}
.sub-menu-header{
   border:1px solid #CCC;
   cursor:pointer; 
}

然后只需删除javascript文件中的no-js类：

$("html").removeClass("no-js");

Answer 2

如果你不能修改你的CSS，更好的方法是使用jQuery的 css 方法。请确保box-shadow属性是否不是由css中的类选择器指定的任何其他方式：

$(document).ready(function () {
  $(".sub-menu-header").css("box-shadow", "none");
});

Jquery在加载时关闭box-shadow

2 个答案: