我有一个网站:https://www.romaheritage.co.uk引导移动菜单问题
的问题是,在页面顶部的引导菜单;它工作正常的台式机/笔记本电脑,但在移动设备(手机/平板电脑)的两个下拉菜单选项查看时“记录” &“杂项”不会扩大了(至少在Android不会,不肯定有关IOS,因为我无法测试它)。我想我忽略了对别人可能很明显的事情。
任何人都可以查看源代码的网页,并指出我什么我做错了方向?
我有一个网站:https://www.romaheritage.co.uk引导移动菜单问题
的问题是,在页面顶部的引导菜单;它工作正常的台式机/笔记本电脑,但在移动设备(手机/平板电脑)的两个下拉菜单选项查看时“记录” &“杂项”不会扩大了(至少在Android不会,不肯定有关IOS,因为我无法测试它)。我想我忽略了对别人可能很明显的事情。
任何人都可以查看源代码的网页,并指出我什么我做错了方向?
我通过用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>
试试这个...
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});