如何循環.attr（）更改點擊？

Question

所以我一直堅持一段時間..

我想建立一個系統，其中用戶有3個按鈕，每個按鈕提出了3個div的1。有一個檢查和當前打開的相應按鈕改變其類的窗口來改變它的背景顏色 - 所以很容易看到什麼選項打開。

然後單擊不同的按鈕加載不同的內容，但保持窗口打開 - 這個工程

單擊同一按鈕兩次關閉該窗口，並重新設置按鈕類 - 這個工程

這應該能夠重複 - 但它不會..

我可以加載相應的窗口，更改其按鈕類。關閉該窗口並將該類重置爲其原始狀態，但是當我嘗試再次打開相同窗口時，該類不會再次更改。它不會重複這個過程..

，除非你重新打開一個不同的窗口在這種情況下，重新啓動其自身並一直工作到同一點......

超級混亂，無法看到什麼怎麼回事..

任何幫助讚賞！

$(document).ready(function(){ 
    $('#findUs').click(function(){ 

     if($('.findUs').length){ //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button----- 
        $('#findUs').attr('class','contactTitle'); 
       $('.infoDropdown').slideToggle("slow"); 
       return false; 
     } 
        $('#findUs').attr('class','selectedContact'); 
        $('#phoneUs').attr('class','contactTitle'); 
        $('#faxUs').attr('class','contactTitle'); 


     $('.infoDropdown').load('global/contactOptions.php .findUs',{},function(){ 

      if($('.infoDropdown').is(':hidden')){ 
        $('.infoDropdown').slideToggle("slow"); 
       } 

       }); 

      }); 


//------------------------------------phone------------------------------------------ 
    $('#phoneUs').click(function(){ 

      if($('.phoneUs').length){ //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button----- 
        $('#phoneUs').attr('class','contactTitle'); 
       $('.infoDropdown').slideToggle('slow'); 
       return false; 
     } 
        $('#phoneUs').attr('class','selectedContact'); 
        $('#findUs').attr('class','contactTitle'); 
        $('#faxUs').attr('class','contactTitle'); 

      $('.infoDropdown').load('global/contactOptions.php .phoneUs',{},function(){ 

       if($('.infoDropdown').is(':hidden')){ 
        $('.infoDropdown').slideToggle("slow"); 

       } 
       }); 
     }); 
//------------------------------------Fax-------------------------------------------- 
    $('#faxUs').click(function(){ 

      if($('.faxUs').length){ //---.length to check if class 'findUs' exists If it dose, close dropdown and re set button----- 
        $('#faxUs').attr('class','contactTitle'); 
       $('.infoDropdown').slideToggle("slow"); 
       return false; 
     } 
        $('#faxUs').attr('class','selectedContact'); 
        $('#findUs').attr('class','contactTitle'); 
        $('#phoneUs').attr('class','contactTitle'); 

      $('.infoDropdown').load('global/contactOptions.php .faxUs',{},function(){ 

       if($('.infoDropdown').is(":hidden")){ 
        $('.infoDropdown').slideToggle("slow"); 

       } 
     }); 
    }); 

}); 

===========================主html ============= ========================

<div align="center" > 
      <span class="contactTitle" id="findUs">Find Us:</span> 
      <span class="contactTitle" id="phoneUs">Phone Us:</span> 
      <span class="contactTitle" id="faxUs">Fax Us:</span> 
     </div> 

     <div class="infoDropdown"> 
     </div> 

=================== ======= divs從公司頁面加載==============================

<div class="findUs" name="findUs"> 
dfgdfg 
     </div> 

     <div class="phoneUs" name="phoneUs"> 
     test 
     </div> 


     <div class="faxUs" name="faxUs"> 
     123 
     </div> 

= ==================================== CSS ============= ===========================

<style> 
.infoDropdown{ 
    display:none; 
    height:250px; 
    margin-top:5px; 
    background-color:rgba(33,252,0,1.00); 
    margin-left: 5px; 
    margin-right: 5px; 
    border-radius: 5px; 
} 
.contactTitle{ 
    width:33%; 
    font-weight:bold; 
    text-align:center; 
    border-radius:5px; 
    display:inline-block; 
    font-size:30px; 
    background-color:green; 
    margin-top:5px; 
    align-items:center; 

} 
.selectedContact{ 
    width:33%; 
    font-weight:bold; 
    text-align:center; 
    border-radius:5px; 
    display:inline-block; 
    font-size:30px; 
    background-color:rgba(33,252,0,1.00); 
    margin-top:5px; 
    align-items:center; 
} 
</style> 

Answer 1

在您用ajax加載過一次內容之後，此檢查始終爲真：if($('.findUs').length)因此，您在到達代碼中更改按鈕類的部分之前返回false。