jQuery click事件在移动浏览器中似乎并未触发。
HTML如下:
<!-- This is the main menu --> <ul class="menu"> <li><a href="/home/">HOME</a></li> <li class="publications">PUBLICATIONS & PROJECTS</li> <li><a href="/about/">ABOUT</a></li> <li><a href="/blog/">BLOG</a></li> <li><a href="/contact/">CONTACT</a></li> </ul> <!-- This is the sub-menu that is to be fired on click --> <div id="filter_wrapper"> <ul id="portfolioFilter"> <li><a href="/nutrition-related/">Nutrition related</a></li> <li><a href="/essays/">Essays and Nonfiction</a></li> <li><a href="/commissioned/">Commissioned works</a></li> <li><a href="/plays/">Plays and performance</a></li> <li><a href="/new-projects/">New Projects</a></li> </ul> </div>
这是用于手机的jQuery脚本:
$(document).ready(function(){ $('.publications').click(function() { $('#filter_wrapper').show(); }); });
当我单击移动浏览器上的“出版物”列表项目时,不会发生任何事情。
您可以在这里查看网站:http://www.ruthcrocker.com/
不确定是否有jQuery mobile特定的事件。
解决方法
如果您已经(或不介意)使用jQuery Mobile,Raminson有一个很好的答案。如果你想要一个不同的解决方案,为什么不只是修改你的代码如下:
<!-- This is the main menu --> <ul class="menu"> <li><a href="/home/">HOME</a></li> <li><a href="#" class="publications">PUBLICATIONS & PROJECTS</a></li> <li><a href="/about/">ABOUT</a></li> <li><a href="/blog/">BLOG</a></li> <li><a href="/contact/">CONTACT</a></li> </ul>
和你的javascript / jquery代码…返回false停止冒泡。
$(document).ready(function(){ $('.publications').click(function() { $('#filter_wrapper').show(); return false; }); });
这应该适用于你想要做的事情。