Мой код работает прилично (хотя и медленно) в Chrome, но не работает в Firefox. В настоящее время скрипт переключает класс при наведении/щелчке элемента списка, открывая div, а второй переключатель добавляет класс размытия к остальным элементам списка в навигации. При втором щелчке он закрывает этот div, но не удаляет класс размытия, как должен. Я работал над этой частью, когда понял, что ни один из сценариев addClass не работает в Firefox. Однако div открывается/закрывается, так что, по крайней мере, работает.
Может ли кто-нибудь помочь мне устранить неполадки, как очистить это для Firefox? Кроме того, какие-либо мысли о том, как удалить класс размытия логотипа, когда элемент списка снова щелкнут и его div закрыт?
Спасибо!
У меня есть этот беспорядок в голове моего HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/wp-content/themes/etoolkit/js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="sidetogglemenu.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="sidetogglemenu.js">
</script>
</head>
Вот HTML:
<ul>
<li><a class="artist-logo" href="#artist-looka"><img src="images/looka-black-circle.png"></a></li>
<li><a class="artist-logo" href="#artist-sremedy"><img src="images/sremedy-black-circle.png"></a></li>
<li><a class="artist-logo" href="#artist-hyperbit"><img src="images/hyperbit-black-circle.png"></a></li>
</ul>
<div id="artist-looka" class="artist-box">
</div>
<div id="artist-sremedy" class="artist-box">
</div>
<div id="artist-hyperbit" class="artist-box">
</div>
Вот мой сценарий:
$(document).ready(function() {
$(".artist-box").hide();
$(".artist-logo").click(function(event) {
event.preventDefault();
var clicked = $(this);
var taggedWithSelect = $('.selected-artist');
var clickPartner = $(clicked.attr('href'));
var selectPartner = $(taggedWithSelect.attr('href'));
var notClicked = $('.artist-logo').not(clicked);
if( clicked.hasClass('selected-artist') ) {
clicked.removeClass('selected-artist');
unclicked.removeClass('blur-logo');
} else {
clicked.addClass('selected-artist');
taggedWithSelect.removeClass('selected-artist');
selectPartner.slideToggle();
notClicked.addClass('blur-logo');
};
clickPartner.slideToggle();
});
});
Вот CSS:
.selected-artist{
width:100%;
max-height: 100%;
-webkit-filter: invert(100%);
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-border-radius: 50%;
}
.blur-logo {
border: 3px red;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}