2014-01-30 39 views
0

我正在使用以下JS来使我的引导程序v3导航在悬停时展开。Bootstrap手机下拉母链接问题

我已经这样做了,以便父链接可以成为一个链接。

<script type="text/javascript">  
     jQuery(function($) { 
$('.navbar .dropdown').hover(function() { 
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown(); 


}, function() { 
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp(); 


}); 


$('.navbar .dropdown > a').click(function(){ 
location.href = this.href; 
}); 


}); 
</script> 

我在手机上的一个问题,虽然,在这里单击父链接,你暂时一瞬间看到了孩子们的链接 - 但你直奔父链接......让你不有能力选择父母下面的孩子链接。

网站:http://crawfordtech.fastnetstaging.co.uk

有问题的父链接被称为 “解决方案”。

任何想法可以做什么?

+0

现在你知道为什么bootstrap不使用悬停事件。如果您希望它在移动设备上运行良好,则必须将父链接移至子元素。 – Blazemonger

+0

我以为可能会有某种双击手机的JS:( – user991830

+0

我想你可以,但是如果你这样做的话,这是一个令人困惑的设计,最好使用子元素 – Blazemonger

回答

0

你可以将它包装在一个条件,所以它会运行时,你需要它 我只是从以前的项目复制pasta'd,所以忽略或随意使用里面的脚本。它也使下跌。

<script type="text/javascript"> 
//boostrap hover script 
jQuery(document).ready(function($){ 
if ($(document).width() > 800){ 
(function(e,d,b){var a=0;var f=null;var c={x:0,y:0};e("[data-toggle]").closest("li").on("mouseenter",function(g){if(f){f.removeClass("open")}d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mousemove",function(g){if(Math.abs(c.x-g.ScreenX)>4||Math.abs(c.y-g.ScreenY)>4){c.x=g.ScreenX;c.y=g.ScreenY;return}if(f.hasClass("open")){return}d.clearTimeout(a);a=d.setTimeout(function(){f.addClass("open")},b)}).on("mouseleave",function(g){d.clearTimeout(a);f=e(this);a=d.setTimeout(function(){f.removeClass("open")},b)})})(jQuery,window,200); 
}}); 
</script>