触摸设备的简单Javascript

我正在尝试创建一个尽可能简单的响应菜单。我几乎没有Javascript方面的经验

是否有一种简单的方法可以在触摸时将

display:none

更改为

display:block

，然后在触摸元件外部时返回到display:none

HTML:

（使用hover，因为它在Android上工作，所以你知道我在做什么）

谢谢你的帮助

---

编辑：我忘了提到我不想使用jQuery。只是纯Javascript。谢谢

此函数调用

isTouchDevice（）

函数，如果成功，页面将附加一个特殊的触摸事件

function isTouchDevice(){
    try{
        document.createEvent("TouchEvent");
        return true;
    }catch(e){
        return false;
    }
}

就这样，只需在页面上包含这些函数，并通过传入要滚动的元素的

ID

来调用它。像这样：

touchShow（“MyElement”）

function touchShow(id){
    if(isTouchDevice()){ //if touch events exist...
       $('#id').show();
       //An alternate way is to use the jQuery css method:
       $("#id").css("display", "block");
    }
}

首先，你应该修正你的标记，你的嵌套是错误的：

<nav>
  <ul>
    <li id="menu_toggle">Menu</li>
    <li><a href="#">Link 01</a></li>
    <li><a href="#">Link 02</a></li>
    <li><a href="#">Link 03</a></li>
  </ul>
 </nav>

这意味着您的所有列表项都是不可见的，但对于切换和导航是否有一个类
打开
，或者如果鼠标悬停在导航上（在桌面上）

然后，您的JavaScript（jQuery）可以如下所示：

nav li { display: none; }

nav.open li,
nav:hover li,
#menu_toggle { display: block; }

$(function(){
    // document ready

    $('#menu_toggle').on('touchstart', function(){
      $('nav').toggleClass('open');
    });
});

<nav>...</nav>
<div id="content">...</div>

当
悬停
不起作用时，这将切换触摸设备上的菜单

在其他任何地方跟踪触摸，但菜单有点棘手，您可以：

每当打开菜单时，向文档的其余部分添加一次性事件处理程序
在菜单和您的内容之间放置一个覆盖层，并捕捉其中的事件
因此，对于选项1，假设您有如下内容：

nav li { display: none; }

nav.open li,
nav:hover li,
#menu_toggle { display: block; }

$(function(){
    // document ready

    $('#menu_toggle').on('touchstart', function(){
      $('nav').toggleClass('open');
    });
});

<nav>...</nav>
<div id="content">...</div>

我必须使用TouchHow（nav ul li）吗？