构建常见问题解答小部件并陷入最小化当前问题。问题开关工作正常。但是当我尝试最小化当前打开的问题时,它开始“在循环中运行('我在猜测)。因为,当我在代码之后添加警报时,它的行为方式应该如此,但在警报关闭后,它是回到原来的状态
它的HTML
<div class="faqttlitem faqttlitem3">
<div class="acfaqttl acfaqttl3">Question</div>
<div class="mobfaqcont mobfaqcont3">
<div class="mobfaqaccontimg mobfaqaccontimg3 w100">
<img src="//cdn.shopify.com/s/files/1/0213/3764/t/38/assets/faq_img3.jpg?6062394605562480157"></div>
<div class="mobfaqacconttxt mobfaqacconttxt3">answer text here</div>
</div>
</div>
和JS
if ($(window).width()< 801 ){
$(".faqttlitem").each(function(){
$(this).click(function(){
if ( $(this).hasClass('activefaq') ) {
$(this).removeClass('activefaq');
$(this).find('.mobfaqcont').hide();
//alert('wtf'); doesn't work without it
} else {
$(this).parent().find(".activefaq").removeClass("activefaq");
$(this).parent().find(".activefaq").find(".mobfaqcont").hide();
$(this).addClass('activefaq');
$(this).find(".mobfaqcont").show();
}
});
});
} else {}
答案 0 :(得分:0)
代码似乎工作正常。
但是以防万一,因为你的每个功能都是不必要的。如果你在jQuery元素中执行on函数,他会将函数绑定到每个元素,并且每个元素都有所不同,因此对于性能问题,请执行以下更改:
if ($(window).width() < 801) {
$(".faqttlitem").on('click', function () {
if ($(this).hasClass('activefaq')) {
$(this).removeClass('activefaq');
$(this).find('.mobfaqcont').hide();
} else {
$(this).parent().find(".activefaq").removeClass("activefaq");
$(this).parent().find(".activefaq").find(".mobfaqcont").hide();
$(this).addClass('activefaq');
$(this).find(".mobfaqcont").show();
}
});
} else {}