3Depth(level) 만들기

<div class="lnb">
	<ul>
        <li>
        	<a href="#">1Depth</a>
            <ul>
                <li>
                    <a href="#">- 2Depth</a>
                    <ul>
                        <li><a href="#">- 3Depth</a></li>
                        <li><a href="#">- 3Depth</a></li>
                        <li><a href="#">- 3Depth</a></li>
                    </ul>
                </li>
                <li>
                	<a href="#">- 2Depth</a>
                    <ul>
                        <li><a href="#">- 3Depth</a></li>
                        <li><a href="#">- 3Depth</a></li>
                    </ul>
                </li>
                <li><a href="#">- 2Depth</a></li>
                <li><a href="#">- 2Depth</a></li>
            </ul>
        </li>
        
        <li>
        	<a href="#">1Depth</a>
            <ul>
                <li>
                	<a href="#">- 2Depth</a>
                    <ul>
                        <li><a href="#">- 3Depth</a></li>
                        <li><a href="#">- 3Depth</a></li>
                    </ul>
                </li>
                <li>
                	<a href="#">- 2Depth</a>
                    <ul>
						<li><a href="#">- 3Depth</a></li>
                        <li><a href="#">- 3Depth</a></li>
                        <li><a href="#">- 3Depth</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        
        <li>
            <a href="#">1Depth</a>
            <ul>
                <li><a href="#">- 2Depth</a></li>
                <li><a href="#">- 2Depth</a></li>
            </ul>
        </li>
        
        <li><a href="#">1Depth</a></li>
    </ul>    
</div>

/* reset css */
* { margin: 0; padding: 0; }
li { list-style: none; }
a, a:active, a:focus { color :#222; text-decoration: none; }

/*************** 1Depth ***************/
.lnb { position: relative; width: 200px; }
.lnb > ul > li { border-bottom: 1px solid #dcdcdc; }
.lnb > ul > li > a { display: block; padding: 14px 35px; 14px 15px; font-size: 15px; background: seagreen url('https://cdn-icons-png.flaticon.com/512/1828/1828925.png') no-repeat center right 15px/10px auto; }
.lnb > ul > li:hover > a { color: #fff; background-color: seagreen; }
.lnb > ul > li.on > a { color: #fff; background: seagreen url('https://cdn-icons-png.flaticon.com/512/860/860821.png') no-repeat center right 15px/10px auto; }

/*************** 2Depth ***************/
.lnb > ul > li ul { display: none; }
.lnb > ul > li ul > li > a { display: block; padding: 14px 25px 14px 14px; font-size: 13px; background: #f5f2ec url('https://cdn-icons-png.flaticon.com/512/1828/1828925.png') no-repeat center right 15px/10px auto; }
.lnb > ul > li ul > li:hover > a { color: seagreen; background-color: #f5f2ec; }
.lnb > ul > li ul > li.on > a { color: seagreen; background: #f5f2ec url('https://cdn-icons-png.flaticon.com/512/860/860821.png') no-repeat center right 15px/10px auto; }

/*************** 3Depth ***************/
.lnb > ul > li ul li ul { display: none; }
.lnb > ul > li ul li ul li a { display: block; padding: 10px 25px; font-size: 12px; background-color: #fff; }
.lnb > ul > li ul li ul li:hover a { text-decoration: underline; }


.lnb ul li.noDepth a { background-image: none; }

// jQuery
var lnbUI = {
    clickE: function(target) {
        var $target = $(target);
        
        // 아래 Depth가 없으면 background-image: none;
        $(target).each(function() {
           if($(this).find('> ul').length > 0) {
               return true;
           }
            $(this).addClass('noDepth');
        });
        
        $target.on('click', 'a', function() {
            var $this = $(this);
            var $depthTarget = $this.next(); // ul
            var $siblings = $this.parent().siblings(); // li
            
            if($this.parent('li').hasClass('noDepth') === false) {
				// removeClass('on'); 해준다.
                $('.lnb ul li ul li').removeClass('on');
                // == $this.parent('li').find('ul li').removeClass('on');
                
                $this.parent().siblings().removeClass('on');
                
                // 2,3Depth가 slideUp
                $this.parent('li').siblings('li').find('ul').slideUp();
                $this.parent('li').find('ul ul').slideUp();
                
                if($depthTarget.css('display') === 'none') {
                    $depthTarget.slideDown();
                    $this.parent('li').addClass('on');
                } else {
                    $depthTarget.slideUp();
                    $this.parent('li').removeClass('on');
                }
            } else {
                return false;
                // console.log('noDepth :: ul없으면 링크이동');
            }
            return false;
        });
    }
}
lnbUI.clickE('.lnb li')

---

 

Reference

https://webclub.tistory.com/368