用於移動設備的Javascript onClick

Question

我正在開發一個導航子菜單，我需要移動設備和平板電腦設備。 我知道使用onClick =“return true”會有所幫助，但是，當用戶點擊列表項時，我還需要關閉我的列表項。 基本上我需要它來切換子菜單。 如果我添加這個簡單的Javascript行，它將起作用，但子菜單將始終保持打開狀態。 如何讓它關閉/切換子菜單？

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;
}

Answer 1

您可以使用在移動瀏覽器上觸發的touchstart事件。

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

更多基於觸摸的事件

Answer 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;
}

Answer 3

經過一些研究和幫助后，我想出了這個問題。 以下是我的代碼中更新的內容，以便在我的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;
    });
  }