JSFiddle - React, Tailwind, and code Playground

by linmic

HTML

<ul id="nav">
    <li><a href="#">Link 1</a>
        <ul class="subnav">
            <li><a href="#">Sub Link 1</a></li>
            <li><a href="#">Sub Link 2</a></li>
            <li><a href="#">Sub Link 3</a></li>
            <li>
                <ul class="subnav">
                    <li><a href="#">Sub Link 2-1</a></li>
                    <li><a href="#">Sub Link 2-2</a></li> 
                    <li><a href="#">Sub Link 2-3</a></li>
                    <li><a href="#">Sub Link 2-4</a></li> 
                    <li><a href="#">Sub Link 2-5</a></li>
                    <li><a href="#">Sub Link 2-6</a></li> 
                    <li><a href="#">Sub Link 2-7</a></li>
                    <li><a href="#">Sub Link 2-8</a></li> 
                </ul>
            </li>
            <li><a href="#">Sub Link 5</a></li>
            <li><a href="#">Sub Link 6</a></li>
        </ul>
    </li>
</ul>

CSS

li { padding-left: 30px; }

JavaScript

$('ul.subnav').each(function() {
    // say the limit is 4
    var $this = $(this),
        cnt = $this.children('li').length,
        node_limit = 4;

    if( cnt>node_limit ) {
        for(var i=node_limit+1; i<=cnt; i++) {
            $this.children('li:nth-child('+i+')').hide();
        }
    }
});