유용한팁 [ jQuery ] 내용 토글 플러그인
- 관리자 (ican22)
- 2021-12-02 18:12:00
- hit2899
- vote1
- 125.185.67.98
특정 엘리먼트를 클릭하면 클래스가 토글되면서 css에 따라 다른 이벤트를 발생시킬 수 있습니다.
자세한 기능은 데모페이지를 통해서 확인가능
데모페이지
http://codepen.io/redgoose/pen/rJEtL
플러그인 js
- // toggle element plugin
- jQuery.fn.toggleElement = function(options)
- {
- var
- $this = $(this),
- defaults = {
- toggleButtonElement : null,
- targetElement : null,
- activeClassName : 'active'
- }
- ,op = $.extend(defaults, options)
- ,$button = $this.find(op.toggleButtonElement)
- ;
- // onclick event handler
- $button.on('click', function(){
- var $target = $this.find(op.targetElement);
- (($target.length) ? $target : $this).toggleClass(op.activeClassName);
- });
- }
호출부분 js
- jQuery(function($){
- $('#toggle').toggleElement({
- toggleButtonElement : '> h1' // 토글 엘리먼트(내부 엘리먼트)
- //,targetElement : '> form' // 클래스이름이 붙는 엘리먼트 (내부 엘리먼트)
- ,activeClassName : 'on' // 토글 클래스명
- });
- });
위의 소스는 단순히 클래스이름만 토글링합니다. 자세한 전체 소스는 데모페이지를 통해서 확인하시길 바랍니다.
게시글 공유
URL복사
열기 닫기