Gumby CSS框架父錨在手機上的下拉列表

Question

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

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