使用引导程序在导航栏中显示/隐藏菜单子列表

Question

我对Bootstrap有疑问。我有这段代码：

<ul>
    <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Home</span></a></li>
    <li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Photogallery</span></a></li>
    <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-user">Chi sono</span></a></li>
    <li><a href="#curriculum" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-linkedin-square">Curriculum</span></a>
    <ul>
        <li><a href="#formazione" id="top-link" class="skel-layers-ignoreHref">Formazione</a></li>
        <li><a href="#stage" id="top-link" class="skel-layers-ignoreHref">Stage</a></li>
        <li><a href="#insegnante" id="top-link" class="skel-layers-ignoreHref">Insegnante Hip Hop</a></li>
        <li><a href="#danzatore" id="top-link" class="skel-layers-ignoreHref">Danzatore</a></li>
        <li><a href="#coreografie" id="top-link" class="skel-layers-ignoreHref">Coreografie</a></li>
    </ul></li>
    <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">Contatti</span></a></li>
</ul>

我希望中心<ul>元素是#curriculum <li>元素的子菜单。换句话说，我想只有在展开#curriculum元素时才会显示子菜单。 我怎样才能做到这一点？ 在这一刻导航菜单是这样的：

＆＃13;

＆＃13;

<ul>
    <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Home</span></a></li>
    <li><a href="#portfolio" id="portfolio-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Photogallery</span></a></li>
    <li><a href="#about" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-user">Chi sono</span></a></li>
    <li><a href="#curriculum" id="about-link" class="skel-layers-ignoreHref"><span class="icon fa-linkedin-square">Curriculum</span></a>
    <ul>
        <li><a href="#formazione" id="top-link" class="skel-layers-ignoreHref">Formazione</a></li>
        <li><a href="#stage" id="top-link" class="skel-layers-ignoreHref">Stage</a></li>
        <li><a href="#insegnante" id="top-link" class="skel-layers-ignoreHref">Insegnante Hip Hop</a></li>
        <li><a href="#danzatore" id="top-link" class="skel-layers-ignoreHref">Danzatore</a></li>
        <li><a href="#coreografie" id="top-link" class="skel-layers-ignoreHref">Coreografie</a></li>
    </ul></li>
    <li><a href="#contact" id="contact-link" class="skel-layers-ignoreHref"><span class="icon fa-envelope">Contatti</span></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将子菜单中所需的列表项放在引导程序下拉列表中，如下所示：

示例http://www.bootply.com/IspYezDkvo

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Curriculum <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#formazione" id="top-link" class="skel-layers-ignoreHref">Formazione</a></li>
    <li><a href="#stage" id="top-link" class="skel-layers-ignoreHref">Stage</a></li>
    <li><a href="#insegnante" id="top-link" class="skel-layers-ignoreHref">Insegnante Hip Hop</a></li>
    <li><a href="#danzatore" id="top-link" class="skel-layers-ignoreHref">Danzatore</a></li>
    <li><a href="#coreografie" id="top-link" class="skel-layers-ignoreHref">Coreografie</a></li>
  </ul>
</li>