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='';
   }

}

как мне нажимая на span раскрывать и закрывать ul. в span нахотися символ +
вот само меню

<div id="mainmenuwidget">
    <li>
        <a href="/category/1"> Toys Amigurumi</a> <span onClick="void showhide(this) " className="badge"><i className="fa fa-plus"></i></span>
        <ul className="displayn">
            <li>
                <a href="/category/6"> Soviet animation</a></li>
            <li>
                <a href="/category/7"> Anime</a></li>
            <li>
                <a href="/category/8"> Animals</a> <span onClick="void showhide(this) " className="badge"><i className="fa fa-plus"></i></span>
                <ul className="displayn">
                    <li>
                        <a href="/category/10"> Dinosaurs</a></li>
                    <li>
                        <a href="/category/11"> Predators</a></li>
                    <li>
                        <a href="/category/12"> Herbivores </a></li>
                    <li>
                        <a href="/category/13"> Mifs and eposs </a></li>
                </ul>
            </li>
            <li>
                <a href="/category/9"> Humans
                </a> <span onClick="void showhide(this) " className="badge"><i className="fa fa-plus"></i></span>
                <ul className="displayn">
                    <li>
                        <a href="/category/14"> National Heroes</a></li>
                    <li>
                        <a href="/category/15"> Politics</a></li>
                    <li>
                        <a href="/category/16"> Cinema heroes</a></li>
                    <li>
                        <a href="/category/17"> Actors</a></li>
                    <li>
                        <a href="/category/19"> Mifs and eposs</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="/category/2"> Accessories</a></li>
    <li>
        <a href="/category/3"> Drawings</a></li>
    <li>
        <a href="/category/4"> Threads and Matereials/a></li>
    <li>
        <a href="/category/5"> Blog </a></li>
    <li>
        <a href="/category/18"> Others</a></li>
</div>

всего лишь добавить js

function showhide(e) {

    e.nextSibling.nextSibling.classList.toggle('displayn');
}

Почему у вас <li> в <div>, а не в <ul>?

Потому что первый ul не надо скрывать,

Есть ещё вопрос как сохранять меню в куках чтобы было меню с памятью?