jQuery 아코디언 플러그인 (Facebook 또는 Google과 같은)

Question

나는 아코디언에 대한 많은 스크립트를 인터넷에서 보았지만 내 요구 사항을 충족시키는 것은 찾지 못했습니다. Facebook에서 사용하는 것과 같은 아코디언 용 플러그인을 만들고 싶습니다. 다음과 같이 작동해야합니다.

1. 클릭하여 열고 닫으십시오.
2. 열린 상태에서 스타일 클래스를 추가하십시오.
3. 외부 클릭으로 닫음. 클릭 이벤트가 아코디언 상자 안에 있으면 닫아서는 안됩니다.

이것을 달성 할 방법이 있습니까? 알고 계시면 도와주세요. jQuery를 처음 사용합니다 ...

미리 감사드립니다.

Answer 1

15 줄의 코드로 해결할 수있는 플러그인이 필요하지 않습니다. 이는 특정 DOM 요소 및 setTimeout을 사용하여 창에서 트리거하는 클릭 이벤트의 순서를 변경하는 것입니다.

var ShowingAccordion = false; 

$(document).ready(function() { 

     $('.MyAccordionOpener').click(function() { 

      if ($(this).next('.MyAccordion').is(':visible') === false) { 

       ShowingAccordion = false; 
       $('.MyAccordion').hide(500); 
       $(this).next('.MyAccordion').addClass('SomeClass'); 
       $(this).next('.MyAccordion').show(500); 
       setTimeout(function() { ShowingAccordion = true; }, 1); 
      } 
     }); 

     $('.MyAccordion').click(function() { 

      ShowingAccordion = false; 
      //this is the line that solves your problem 
      setTimeout(function() { ShowingAccordion = true; }, 1); 
     }); 


     $(document).click(function() { 

      if (ShowingAccordion === true) {  

       $('.MyAccordion').hide(500); 
       ShowingAccordion = false; 
      }  
     }); 
}); 

그리고 여기에는 년대 demo

당신이 당신이 대답 및 코딩 행복을 받아 들일 수 다음 필요한 않는 경우!