脚本保持“运行在圈子中”

Question

建设FAQ小部件并陷入了最小化当前问题的困境。问题开关工作正常。但是，当我试图尽量减少当前未解决的问题时，它会开始“循环运行”（我猜测）。因为当我在代码之后添加警报时，它的行为方式应该是这样，但是在警报关闭后，它回到它的原始状态

它的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 {} 

Answer 1

的代码似乎很好地工作。

但是为了以防万一，因为你的每本功能离子是不必要的。如果您对功能为jQuery的元素做了一个，他绑定功能，每一个元素，而这是在每一个不同的，所以对于性能问题做如下修改：

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 {}