Jquery отключить box-shadow при загрузке - PullRequest
4 голосов
/ 22 ноября 2011

У меня есть некоторые элементы, которые по умолчанию имеют рамку-тень CSS3, если у пользователя включен javascript, хотя я бы хотел скрыть тень от рамки.

В настоящее время я использую код, показанный ниже, чтобы скрыть другие элементы, и этот метод работает отлично, за исключением box-shadow. Я провел несколько тестов, то есть поместил другой код там, где «box-shadow: none», и он всегда работает как положено, поэтому я предполагаю, что это проблема совместимости атрибута box3 shadow в CSS3 и 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; 
}

Ответы [ 2 ]

3 голосов
/ 22 ноября 2011

Вы можете добавить класс no-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; 
}

Затем просто удалите класс no-js из вашего файла javascript:

$("html").removeClass("no-js");
1 голос
/ 22 ноября 2011

Если вы не можете изменить свой CSS, лучший способ сделать это - использовать метод jQuery css . Убедитесь, что свойство box-shadow не указано иначе, как селектором классов в вашем css:

$(document).ready(function () {
  $(".sub-menu-header").css("box-shadow", "none");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...