Bootstrap Mobile菜单问题

Question

I have a website at: https://www.romaheritage.co.uk

The issue is the Bootstrap menu at the top of the page; it works fine on desktop PCs/Laptops, but when viewed on mobile devices (phones/tablets) the two drop-down menu options "Records" & "Misc" won't expand out (at least on Android they won't, not sure about IOS because I can't test it). I think I'm overlooking something which may be obvious to others.

Can anyone view the source for the page and point me in the direction of what I've done wrong?

Answer 1

I made it work by replacing the a.dropdown-toggle by a div.dropdown-toggle.

The css is not good then but I believe you can make this right.

Here's the code

<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

try this one...

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