Question

我正在开发一个导航子菜单，我需要移动设备和平板电脑设备。我知道使用onClick =＆＃34;返回true＆＃34;但是，当用户点击列表项时，我还需要关闭我的列表项。基本上我需要它来切换子菜单。如果我添加这个简单的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;
});

More touch based events

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

用于移动设备的Javascript onClick

3 个答案: