移动设备下拉菜单中的 Gumby CSS 框架父锚点答案

【问题标题】：Gumby CSS framework parent anchor in dropdown on mobile移动设备下拉菜单中的 Gumby CSS 框架父锚点
【发布时间】：2013-08-02 23:01:44
【问题描述】：

使用 gumby CSS 框架，在移动布局中，带有下拉菜单的顶级锚点是可点击的。单击时，锚点会加载一个新页面，而不是显示下拉菜单。有没有人遇到过这个问题并找到了解决办法？

<div class="row navbar pretty" id="nav1">
  <!-- Toggle for mobile navigation, targeting the <ul> -->
  <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
  <h1 class="four columns logo">
    <a href="#">
      <img src="/img/gumby_mainlogo.png" gumby-retina />
    </a>
  </h1>
  <ul class="eight columns">
    <li><a href="#">Features</a></li>
    <li>
      <!-- This link opens dropdown but also redirects to the href -->
      <a href="http://google.com">Documentation</a>
      <div class="dropdown">
        <ul>
          <li><a href="#">The Grid</a></li>
          <li><a href="#">UI Kit</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Demo</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Customize</a></li>
  </ul>
</div>

【问题讨论】：

标签： drop-down-menu responsive-design gumby-framework

【解决方案1】：

您的锚点指向 google.com 而不是它自己“#” 另外，我会尝试避免在列表中打开一个 div 供您的 css 使用，而是将 aclass 添加到您的列表中应该是：

<div class="row navbar pretty" id="nav1">
  <!-- Toggle for mobile navigation, targeting the <ul> -->
  <a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
  <h1 class="four columns logo">
    <a href="#">
      <img src="/img/gumby_mainlogo.png" gumby-retina />
    </a>
  </h1>
  <ul class="eight columns">
    <li><a href="#">Features</a></li>
    <li>
      <!-- This link opens dropdown but also redirects to the href -->
      <a href="#">Documentation</a>
        <ul class="dropdown">
          <li><a href="#">The Grid</a></li>
          <li><a href="#">UI Kit</a></li>
          <li><a href="#">Sass</a></li>
          <li><a href="#">JavaScript</a></li>
          <li><a href="#">Demo</a></li>
        </ul>
    </li>
    <li><a href="#">Customize</a></li>
  </ul>
</div>

【讨论】：