觸摸設備的簡單Javascript

Question

我試圖創建一個盡可能簡單的響應式菜單。 我幾乎沒有Java經驗。

有一個簡單的方法來改變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. 每當您打開菜單時，將一次性事件處理程序添加到文檔的其余部分
2. 在菜單和您的內容之間放置一個疊加層，並在其上捕獲事件

因此，對於選項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');
        });
      }
    });
});