-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
Не работает jQuery в IE8-IE11 и FireFox
Добрый день.
Подскажите, пожалуйста, почему данный скрипт работет Хроме, Яндексе, Комодо, Опере и не работает в IE8-11 и Файерфоксе.
И как можно его изменить кроссбраузерно.
Этот скрипт меняет фоновые картинки у менюшки в зависимости от того, развернута эта менюшка или нет (за разворачиваемость по клику отвечает другой скрипт).
Заранее спасибо!
HTML код:
<html>
<meta charset="utf-8">
<title></title>
<meta name="title" content="">
<style type="text/css">
.qrf_list li .qrf_name{position:relative;display:block;background:red url(http://site.ru/images/bottom_white_10px.png) no-repeat 98% 50%}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".qrf_name").on('click', function(){
if ("url(http://site.ru/images/bottom_white_10px.png)" === $(this).css("background-image")) {
$(this).css({"background-image":"url(http://site.ru/images/top_white_10px.png)","background-color":"blue"});
alert("11111111");
}
else {
$(this).css({"background-image":"url(http://site.ru/images/bottom_white_10px.png)","background-color":"red"});
alert("222222222");
}
return false;
});
});
</script>
<ul class="qrf_list">
<li><span class="qrf_name">НАЗВАНИЕ БЛОКА</span>
<ul>
<li>
СОДЕРЖИМОЕ БЛОКА1
</li>
<li>
СОДЕРЖИМОЕ БЛОКА2
</li>
</ul>
</li>
</ul>
</html>
|
Цитата:
Цитата Мамелюк
не работает в IE8-11 и Файерфоксе »
|
Следующее условие не срабатывает и всегда выполняется блок с alert("222222222"):
Код:
if ("url(http://site.ru/images/bottom_white_10px.png)" === $(this).css("background-image"))
Потому что IE/Firefox возвращают свойство background-image в виде «url( "http://site.ru/images/bottom_white_10px.png ")» - с выделенными кавычками.
С заменой кавычек будет работать:
Код:
$(function() {
$(".qrf_name").on('click', function() {
if ("url(http://site.ru/images/bottom_white_10px.png)" === $(this).css("background-image").replace(/"/g, "")) {
$(this).css({
"background-image": "url(http://site.ru/images/top_white_10px.png)",
"background-color": "blue"
});
alert("11111111");
} else {
$(this).css({
"background-image": "url(http://site.ru/images/bottom_white_10px.png)",
"background-color": "red"
});
alert("222222222");
}
return false;
});
});
|
Цитата:
Цитата Habetdin
Потому что IE/Firefox возвращают свойство background-image в вид »
|
Точно! Спасибо! Значит придется делать через замену класса, а не свойства (это тоже не моё решение, на другом сайте подсказали только что)
ps Производители браузеров производили браузеры, производили, да не выпроизводили...((( |
Время: 15:20.
© OSzone.net 2001-
