汉堡菜单折叠问题答案

【问题标题】：Hamburger menu collapsing issue汉堡菜单折叠问题
【发布时间】：2017-05-30 14:28:19
【问题描述】：

当我点击汉堡菜单的第三个项目（“Opere”）时，它会正确折叠，但下一个项目（“Contatti”）不会在项目下滚动。为什么？

http://www.simonenicosia.it/demo/

[]

<nav id="main-nav">
      <ul id="navbar-submenu">
        <li><a href="index.php">Home</a></li>
        <li><a href="#profilo">Profilo</a></li>
        <li><span data-toggle="collapse" data-target="#toggleOpere" data-parent="#navbar-submenu" class="collapsed">Opere</span>
          <div class="collapse" id="toggleOpere" style="height: 0px;">
            <ul class="nav nav-list">
              <li><a href="#"id="projects/pittura.html" class="project-expander">Pittura</a></li>
              <li><a href="#"id="projects/evoluzioni.html" class="project-expander">Evoluzioni pittoriche</a></li>
              <li><a href="#"id="projects/3d.html" class="project-expander">Forme tridimensionali</a></li>
              <li><a href="#"id="projects/steel.html" class="project-expander">Steel</a></li>
              <li><a href="#"id="projects/artdesign.html" class="project-expander">ArtDesign</a></li>
              <li><a href="#"id="projects/musticatower.html" class="project-expander">MusticaTower</a></li>
              <li><a href="#"id="projects/unstoppable.html" class="project-expander">Unstoppable spirit</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#contatti">Contatti</a></li>
      </ul>
      <a href="#" class="cd-close-menu">Chiudi<span></span></a>
    </nav>

【问题讨论】：

你的问题不清楚...
我添加了屏幕截图 :) “Opere”的扩展项目显示“Contatti”。我想“Contatti”向下滚动所有项目

标签： twitter-bootstrap collapse hamburger-menu

【解决方案1】：

您为li 指定了高度，这会阻止子菜单在单击时展开。您可以将其更改为最小高度。

#main-nav li {
    height: 15%;
}
#main-nav li {
    height: 20%;
}

改为：

#main-nav li {
    min-height: 15%;
}

【讨论】：