使用引導程序在導航欄中顯示/隱藏菜單子列表

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元素展開時才顯示子菜單。 我怎樣才能做到這一點？ 此時，導航菜單為：

 <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> 

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>