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() { $(this).children('li').slice(4).hide(); });