본문 바로가기
프로그래밍/자바스크립트

동시에 여러 메뉴가 열리는 아코디언(Accordian) 메뉴 만들기

by pentode 2018. 10. 31.

이전 글 "jQuery UI Accordian을 사용한 메뉴 만들기" 에서 메뉴를 만들어 보았는데, 한번에 하나의 메뉴만 열렸었습니다. 하나를 열면 열려 있던 다른 메뉴는 닫혀 버리는 것이죠.


여기서는 여러 메뉴를 열 수 있는 방법을 알아 봅니다. jQuery UI의 Accordian으로는 구현이 안되므로 jQuery 플러그인으로 새로 만들어 봅니다.


아코디언 메뉴



1. jQuery 를 포함합니다.


<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>



2. 메뉴가 될 HTML 입니다.


<div id="menu">

    <h3 style="margin:0;outline:solid 1px red;"><a>Menu 1</a></h3>

    <div style="outline:solid 1px blue;">

        <div><a>Sub menu 1-1</a></div>

        <div><a>Sub menu 1-2</a></div>

    </div>

    <h3 style="margin:0;outline:solid 1px red;"><a>Menu 2</a></h3>

    <div style="outline:solid 1px blue;">

        <div><a>Sub menu 2-1</a></div>

        <div><a>Sub menu 2-2</a></div>

    </div>

    <h3 style="margin:0;outline:solid 1px red;"><a>Menu 3</a></h3>

    <div style="outline:solid 1px blue;">

        <div><a>Sub menu 3-1</a></div>

        <div><a>Sub menu 3-2</a></div>

    </div>

</div>



3. 플러그인을 생성합니다.


코드를 간단히 하기 위해서 메뉴가 되는 헤더는 <h3> 태그를 사용합니다.


<script type="text/javascript">

//<![CDATA[

(function($, undefined){

    $.fn.multiOpenMenu = function(options) {

        // 메뉴가 될 엘리먼트가 없는지 체크합니다.

        if(this.length === 0) {

            return this;

        }


        // 기본값 설정 : active는 처음에 열려 있을 메뉴 입니다.

        var settings = $.extend({

            active: 0

        }, options);


        // 초기 메뉴를 생성합니다.

        var headers = this.find(">h3");

        $.each(headers, function(i, opt) {

            if(i != settings.active) {

                $(this).next().hide();

            }

        });


        // 메뉴를 클릭했을때 서브 메뉴를 보여주는 이벤트를 만듭니다.

        headers.on('click', function() {

            var menuArea = $(this).next();

            var isOpen = menuArea.is(":visible");


            // 열린 상태에 따라 이벤트를 반전해서 발생시킨다.

            menuArea[isOpen ? 'slideUp' : 'slideDown']().trigger(isOpen ? 'hide' : 'show');


            // 이벤트 버블링을 멈춘다.

            return false;

        });


        return this;

    };

}(jQuery));


// 메뉴를 생성합니다.

$(function(){

    $("#menu").multiOpenMenu();

});

//]]>

</script>


간단히 메뉴가 열리고 닫히는 기능만 있습니다. 필요하다면 jQuery UI와 같이 헤더를 선택할 수 있도록 하는 기능과 여러개가 열릴지 한번에 하나만 열릴지를 지정하는 기능도 넣어 볼 수도 있겠습니다.



※ (function($, undefined){...}(jQuery)); 에서 undefined의 의미


undefined는 ECMAScript 3에서 mutable입니다. 즉, undefined = true; 처럼 값을 재할당 할수 있다는 것을 의미합니다. 위에서 처럼 자기 호출(self-invoking)함수에서 undefined를 인자에 선언하고, 실제 인자에서는 생략해서 내부에서 undefined의 값이 변하지 않도록 보호할 수 있습니다. ECMAScript 5의 strict 모드('user strict;')에서는 undefined에 다른 값을 할당하면 파서가 에러를 발생시킵니다.


반응형