jquery 플러그인 제작 아코디언 패널 효과implementation_jquery

먼저 다음 html 구조를 포함하는 html 파일을 만듭니다.

코드 복사 코드는 다음과 같습니다.

　

　　

첫 번째 창

　　

이 스크립트는 한 번에 하나의 창만 표시되도록 허용해야 합니다.
　

　

　

두 번째 창

이 스크립트는 다음을 허용해야 합니다. 한 번에 하나의 창만 표시됩니다.

　

　

　;p>이 스크립트는 창을 하나만 허용해야 합니다. 한 번에 볼 수 있습니다.

　

다음 CSS를 정의하세요.

코드 복사

코드는 다음과 같습니다: 　>
이제 jquery.accordtion.js 플러그인 구현을 소개하겠습니다. 가장 먼저 고려해야 할 것은 창의 콘텐츠 부분인 p 태그를 숨기는 방법입니다. 제목인 h1을 숨길 필요는 없습니다.




코드 복사


코드는 다음과 같습니다.


(함수($) {

$.fn .accordtion = function () {
return this.each(function () {
$(this).find('p').hide();

}); } })(jQuery);　 페이지에서 호출하는 코드:

코드 복사


코드는 다음과 같습니다.


$(document).ready(function () {
　$('#pane-container').accordtion();

});

플러그인 코드는 매우 간단합니다. 클래스 창이 있는 div 아래에서 p를 찾아 숨기면 됩니다. 다음으로 달성하려는 것은 사용자가 h1을 클릭하면 해당 p 태그의 내용이 표시되고 h1에 해당하는 다른 p 태그의 내용은 숨겨지는 것입니다. 코드는 다음과 같습니다. 코드 복사

코드는 다음과 같습니다.


//Set h1 태그의 클릭 이벤트
self.delegate('h1', 'click', function () {

//해당 p 태그에 대한 SlideToggle 효과 설정
$(this).next( 'p').slideToggle(600)
　　　　//다른 창 개체를 가져오고 그 아래에 있는 p 태그를 찾아 닫습니다.

　　.parent().siblings().children('p').slideUp( 600); }); 이제 플러그인이 매우 세련되었으므로 마지막으로 할 일은 사용자 정의 속성 옵션을 추가하는 것입니다. '기본적으로 표시되는 창'.

코드 복사


코드는 다음과 같습니다.


//표시할 요소 설정
self .children(':eq(' options.visibleByDefault ')')//options.visibleByDefault와 일치하는 창 개체를 찾습니다

　.children('p')
　.show()

전체 코드를 직접 보려면 데모를 다운로드해야 합니다. jQuery.plugin.accordtion 지원해 주셔서 감사합니다. 이 글이 도움이 되기를 바랍니다. 코드에 대해 불분명한 점이 있으면 저에게 연락하세요.