dropdown menu
 

dropdown menu есть ли у bootstrap решение для многоуровневого dropdown menu из ul li?

не смог найти

<div id="mainMenu">
    <li class="">
        <a>Toys Amigurumi                    <span class="badge pull-right"><i class="fa fa-plus"></i></span>
        </a>
        <ul>
            <li class="">
                <a>Soviet animation            </a>
            </li><li class="">
                <a>Anime            </a>
            </li><li class="">
                <a>Animals                    <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                </a>
                <ul>
                    <li class="">
                        <a>Dinosaurs            </a>
                    </li><li class="">
                        <a>Predators            </a>
                    </li><li class="">
                        <a>Herbivores            </a>
                    </li><li class="">
                        <a>Mifs and eposs            </a>
                    </li>        </ul>
            </li><li class="">
                <a>Humans                    <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                </a>
                <ul>
                    <li class="">
                        <a>National Heroes            </a>
                    </li><li class="">
                        <a>Politics            </a>
                    </li><li class="">
                        <a>Cinema heroes            </a>
                    </li><li class="">
                        <a>Actors            </a>
                    </li><li class="">
                        <a>Mifs and eposs            </a>
                    </li>        </ul>
            </li>        </ul>
    </li><li class="">
        <a>Accessories            </a>
    </li><li class="">
        <a>Drawings            </a>
    </li><li class="">
        <a>Threads and Matereials            </a>
    </li><li class="">
        <a>Blog            </a>
    </li><li class="">
        <a>Others            </a>
    </li></div>

вот часть кода рекурсивной функции которая генерирует данное меню

<li class="">
    <a><?= $category['name'];?>
        <?php
        if(isset($category['childs'])):?>
            <span class="badge pull-right"><i class="fa fa-plus"></i></span>
        <?php endif;?>
    </a>
    <?php if(isset($category['childs'])):?>
        <ul>
            <?= $this->getMenuHtml($category['childs'])?>
        </ul>
    <?php endif;?>
</li>

как сделать раскрывающееся многоуровневое меню

код ниже раскрывает дерево но не закрывает, почему?

<li onclick="void showhide(this)">
    <a> <?= $category['name'];?>
        <?php
        if(isset($category['childs'])):?>
            <span class="badge"><i class="fa fa-plus"></i></span>
        <?php endif;?>
    </a>
    <?php if(isset($category['childs'])):?>
        <ul class="displayn">
            <?= $this->getMenuHtml($category['childs'])?>
        </ul>
    <?php endif;?>
</li>

function showhide(e) {
   if(e.childNodes[3].className=='') {
      e.childNodes[3].className='displayn';
   }else{
      e.childNodes[3].className='';
   }

}