JQuery 脚本在 Firefox 中不起作用

Question

我的代码在 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);
}

Answer 1

我已经研究了您的问题一段时间，我的理解是，单击图像时只有 2 个 href 可以具有“模糊徽标”类，而单击同一图像两次时则没有。鉴于此，我认为您应该尝试在 else 块中添加一个删除类（代码在新图像点击时传递）：

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

我希望这会有所帮助。