jquery關閉加載盒陰影

我有一些CSS3框陰影作爲默認的元素，如果用戶已打開javascript，但我想隱藏盒陰影。jquery關閉加載盒陰影

我目前使用下面的代碼來隱藏其他元素，這個方法除了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; 
}

來源

2011-11-22 Phil

有'箱shadow' b een使用相同的選擇器[特異性]（http://www.w3.org/TR/CSS2/cascade.html#specificity）（'.sub-menu-header'）設置？ – jensgram

是的，我已經添加了子菜單頭的css代碼，使其更清晰 – Phil

你可以無級JS添加到您的HTML標籤：<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文件無JS類：

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

來源

2011-11-22 10:07:12 dodger

這工作出色，非常感謝！ – Phil

如果你不能修改你的CSS，一個更好的方式來做到這一點是通過使用jQuery的CSS方法。可以肯定的，如果box-shadow屬性未指定任何其他方式比類選擇在你的CSS：

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

來源

2011-11-22 10:03:53 Przemek

感謝您的幫助，雖然這將工作，盒子的陰影會閃爍起來之前它被隱藏，我不希望用戶看到什麼 – Phil

jquery關閉加載盒陰影

回答

相關問題