Question

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

是否有一种简单的方法可以在触摸时将display:none更改为display:block，然后返回显示：在元素外部触摸时为无？

HTML：

<nav>
<ul>
<i class="fa fa-bars"></i> Menu
    <a href="index.html"><li>Home <i class="fa fa-home"></i></li></a>
    <a href="surfbagelmenu.htm"><li>Menu <i class="fa fa-cutlery"></i></li></a>
    <a href="gallery.htm"><li>Gallery <i class="fa fa-picture-o"></i></li></a>
    <a href="links.htm"><li>Cool Links <i class="fa fa-link"></i></li></a>
</ul>

CSS：

nav li {
display:none;
}


nav ul:hover li {
display:block;
}

（使用悬停，因为它可以在Android上运行，因此您可以了解我正在尝试做什么）

感谢您的帮助！

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

Answer 1

此函数调用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");
    }
}

Answer 2

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

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

将CSS更改为以下内容：

nav li { display: none; }

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

这意味着您的所有列表项都是不可见的，但是对于切换以及导航具有类open，或者鼠标是否悬停导航（在桌面上）。

然后你的JavaScript（jQuery）看起来像这样：

$(function(){
    // document ready

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

当hover无法正常工作时，这将切换触控设备上的菜单。

跟踪其他地方的触摸，但菜单有点棘手，你可以：

每当您打开菜单
在菜单和您的内容之间添加一个叠加层，并在该

因此对于选项1，假设你有类似的东西：

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

你可以这样做：

$(function(){
    // document ready

    var isMenuOpen = false;

    $('#menu_toggle').on('touchstart', function(){
      // reverse boolean
      isMenuOpen = !isMenuOpen;
      // add/remove class depending on state
      $('nav').toggleClass('open', isMenuOpen);

      if( isMenuOpen ){
        // If menu is now open, add a closing event handler to the content
        $('#content').once('touchstart', function(){
          $('nav').removeClass('open');
        });
      }
    });
});

触摸设备的简单Javascript

2 个答案: