2014-10-19 80 views
3

我正在使用移动设备和平板电脑设备访问导航的子菜单。我知道,使用onClick =“返回true”将做到这一点,但是,当用户单击列表项时,我还需要我的列表项关闭。基本上我需要它来切换子菜单。如果我添加这个简单的Javascript代码,它将起作用,但子菜单将始终保持打开状态。我怎样才能让它关闭/切换子菜单?关于移动设备的Javascript onClick

HTML: 
     <nav> 
      <ul> 
       <li class="active"><a href="#">Menu 1</a></li> 
       <li><a href="#">Menu 2</a></li> 
       <li><a href="#">Menu 3</a></li> 
       <li class="bg"><a class="dropdown" href="#">Menu 4</a> 
        <ul> 
         <li><a href="#">Sub 1</a></li> 
         <li><a href="#">Sub 2</a></li> 
        </ul> 
       </li> 
      </ul> 
     </nav> 

Javascript: 
$('nav li.bg').on('click', function(){ 
    return true; 
} 
+1

'click'事件仅发射在移动设备上的'a'元素 – hindmost 2014-10-19 17:17:23

+0

@最后的信息来源? – ProllyGeek 2014-10-19 17:17:57

+0

@ProllyGeek来自[jquery docs](http://api.jquery.com/click/)的引用:_ **鼠标**指针位于元素上方时,click事件发送到元素,并且**鼠标**按钮被按下并释放._ – hindmost 2014-10-19 17:30:35

回答

3

您可以使用touchstart事件,触发在移动浏览器。

$('nav li.bg').on('click touchstart', function(){ 
    return true; 
}); 

More touch based events

+0

这似乎并没有像我希望的那样切换李。 – 2014-10-19 18:19:07

+0

@ShakeelVictor当然不会切换li。因为你没有在你的点击功能中做任何事情(返回true什么都不做)。 也许看看[jQuery切换功能](http://api.jquery.com/toggle/) – lukasgeiter 2014-10-19 18:36:55

0

我的一些研究和帮助后,想通了这个问题。下面是我的代码进行了更新我的CSS的一些更新,以及之后正确地触发该移动设备上:

 function is_touch_device() { 

    return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); 
    } 

    if(is_touch_device()) { 

    $('.bg').on('click', function(){ 

     $(this).toggleClass('activate'); 

     $(this).find('ul').slideToggle(); 
     return false; 
    }); 
    } 
2

的p单击虚拟方法:

$('p').on("touchstart",p_touch_start); 
$('p').on("touchmove",p_touch_move); 
$('p').on("touchend",p_touch_end); 

function p_touch_start(){ 
    p_touch_move.cancel_click = false; 
} 
function p_touch_end(){ 
    if(p_touch_move.cancel_click) return; 
    p_touch_move.cancel_click = true;//avoid somehow repeat call 
    //trigger onclick() 

} 
function p_touch_move(){ 
    //user is drag page, not click 
    p_touch_move.cancel_click = true; 
}