腳本保持「運行在圈子中」

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