引導移動菜單問題

Question

我有一個網站：https://www.romaheritage.co.uk

的問題是，在頁面頂部的引導菜單;它工作正常的臺式機/筆記本電腦，但在移動設備（手機/平板電腦）的兩個下拉菜單選項查看時「記錄」 &「雜項」不會擴大了（至少在Android不會，不肯定有關IOS，因爲我無法測試它）。我想我忽略了對別人可能很明顯的事情。

任何人都可以查看源代碼的網頁，並指出我什麼我做錯了方向？

Answer 1

我通過用div.dropdown-toggle替換a.dropdown-toggle來使其工作。

該css不好，但我相信你可以做到這一點。

下面的代碼

<div class="collapse navbar-collapse" id="tb-nav-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a class="page-scroll" href="http://www.romaheritage.co.uk/#about">About</a></li> 
     <li class="dropdown"> 

      <!-- Change a to div --> 
      <div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Records <span class="caret"></span></div> 

      <ul class="dropdown-menu"> 
       <li><a href="http://www.romaheritage.co.uk/parish-records">BMD</a></li> 
       <li><a href="http://www.romaheritage.co.uk/census-records">Census</a></li> 
      </ul> 
      </li> 
     <li><a class="page-scroll" href="http://www.romaheritage.co.uk/newspaper-articles">Newspapers</a></li> 
     <li><a class="page-scroll" href="http://www.romaheritage.co.uk/#blog">Blog</a></li> 
     <li class="dropdown"> 

      <!-- Change a to div --> 
      <div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc. <span class="caret"></span></div> 

      <ul class="dropdown-menu"> 
      <li><a href="http://www.romaheritage.co.uk/queen-victorias-journals">Queen Victorias Journals</a></li> 
      </ul> 
     </li> 
     <li><a class="page-scroll" href="http://www.romaheritage.co.uk/#contact">Contact</a></li> 
     </ul> 
    </div> 

Answer 2

試試這個...

$("li.dropdown").click(function(e){ 
    $(this).toggleClass("open"); 
});