Скрипт JQuery не работает в Firefox

0

Мой код работает прилично (хотя и медленно) в Chrome, но не работает в Firefox. В настоящее время скрипт переключает класс на элемент hover/click элемента списка, показывая div, а второй переключатель добавляет класс размытия к остальным элементам списка в навигации. Во втором клике он закрывает этот div, но не удаляет класс размытия так, как должен. Я работал над этой частью, когда понял, что ни один из сценариев addClass не работает в Firefox. Однако div действительно открывает/закрывает, так что, по крайней мере, работает.

Может ли кто-нибудь помочь мне решить, как очистить это для Firefox? Кроме того, любые мысли о том, как удалить класс blur-logo, когда элемент списка снова щелкнут, и его "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);
}
  • 1
    может ошибка, которую вы получаете? может быть ошибка трассировки в браузере?
  • 0
    что именно не работает стиль CSS?
Показать ещё 4 комментария
Теги:
browser
firefox
toggleclass

1 ответ

0

Я некоторое время обсуждал ваш вопрос, и я понимаю, что только 2 hrefs могут иметь класс "blur-logo" при щелчке изображения и ни одного, когда одно и то же изображение дважды щелкнет. Учитывая это, я думаю, вы должны попробовать добавить класс remove в блок else (где код переходит на новый клик):

else {
   clicked.addClass('selected-artist');
   clicked.removeClass('blur-logo');

Надеюсь, это поможет.

  • 0
    Спасибо! Это работает при удалении эффекта размытия из всех элементов списка при повторном щелчке выбранного (чтобы закрыть). К сожалению, это все еще не работает в Firefox.
  • 0
    На самом деле я работал над этим кодом в Firefox 28.0 и не обнаружил никаких проблем в Firebug. Может быть, попробуйте скачать Firebug и посмотреть, какие выводы в консоли?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню