2014-10-19 6 views
3

Я работаю над подменю для навигатора, который должен быть доступен для мобильных и планшетных устройств. Я знаю, что использование onClick = "return 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

+0

@hindmost источник информации? – ProllyGeek

+0

@ProllyGeek Цитата из [jquery docs] (http://api.jquery.com/click/): _ Событие клика отправляется элементу, когда указатель ** mouse ** находится над элементом, а ** мышь ** нажата и отпущена. – hindmost

ответ

3

Вы можете использовать touchstart событие, которое вызывает у мобильных браузеров.

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

More touch based events

+0

Это, кажется, не переключает ли, как я бы надеялся. –

+0

@ShakeelVictor, конечно, он не переключает ли. Потому что вы ничего не делаете в своей функции щелчка (возврат true ничего не делает). Возможно, посмотрите на функцию jQuery toggle (http://api.jquery.com/toggle/) – lukasgeiter

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').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; 
} 
Смежные вопросы