[英]JQuery script not working in Firefox
我的代码在Chrome中运行正常(尽管速度较慢),但在Firefox中运行失败。 当前,脚本在列表项的悬停/单击上切换一个类,显示一个div,第二个切换将模糊类添加到导航中的其余列表项。 在第二次单击时,它将关闭该div,但不会像应有的那样删除blur类。 当我意识到Firefox中的addClass脚本都不起作用时,我正在从事这一工作。 div确实会打开/关闭,以便至少起作用。
谁能帮我解决如何清理Firefox的问题? 另外,关于再次单击列表项并关闭其div时如何删除blur-logo类的任何想法?
谢谢!
我的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);
}
我已经讨论了一段时间,我的理解是,单击图像时,只有2 hrefs可以具有“ blur-logo”类,而单击同一图像两次时,则不能具有“ blur-logo”类。 鉴于此,我认为您应该尝试在else块中添加remove类(代码在新图片点击时传递):
else {
clicked.addClass('selected-artist');
clicked.removeClass('blur-logo');
我希望这有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.