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

이전 글 "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에 다른 값을 할당하면 파서가 에러를 발생시킵니다.