將鼠標懸停在桌面上打開菜單，然后點擊移動

Question

我試圖創建一個菜單按鈕，將其懸停時顯示桌面上的下拉鏈接集。 但是，顯然用戶無法將其懸停在手機等上，因此一直在嘗試找出如何使按鈕在單擊時顯示菜單。

到目前為止，我設法使用jquery在鼠標進入和離開時添加和刪除.show-nav類。 我嘗試添加以下代碼塊，但它顯然也會影響桌面，如果有人單擊按鈕，菜單將變得有點麻煩（因為該類將應用在懸停上，然后使用單擊永久添加和刪除）。

由於使用了cesare，除了iOS上的Chrome瀏覽器，其他所有功能都可以正常運行。 djtwigg的解決方案可在Chrome中運行，但不能在Safari中使用。 是否可以將兩個解決方案合並在一起？

<nav>
    <ul>
        <li id="nav-button">
            <a id="nav-click" href="#">Menu <i class="fa fa-bars"></i></a>
            <ul class="sub-nav">
                <li><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
        </li>
    </ul>
</nav>

var flag = false;
container.bind('touchstart', function(){
if (!flag) {
   flag = true;
   setTimeout(function(){ flag = false; }, 260);
   list.toggleClass('show-nav');
}
return false
});

container.hover(function(){
   list.addClass('show-nav');
}, function(){
   list.removeClass('show-nav');    
});
});

Answer 1

您可以將“ hover”用於桌面，並將“ touchstart”綁定至移動設備。

var flag = false;
container.bind('touchstart', function(){
if (!flag) {
   flag = true;
   setTimeout(function(){ flag = false; }, 260);
   list.toggleClass('show-nav');
}
return false
});

container.hover(function(){
   list.addClass('show-nav');
}, function(){
   list.removeClass('show-nav');    
});

試試這個小提琴： https : //jsfiddle.net/62cvsvvc/6/

該解決方案受到以下問題的啟發： 如何綁定“ touchstart”和“ click”事件，但不對兩者進行響應？

編輯我檢查了我的服務器並正常工作。 我想iOS的這個問題與jsFiddle環境有關。

請嘗試： http : //cesare.heliohost.org/test/

Answer 2

使用touchstart事件：

$('#nav-button').on('touchstart', function(){
     $('.sub-nav').toggleClass('show-nav');
});

Answer 3

可以通過檢查事件是觸摸還是單擊來實現。 我找到了一個可以幫助您的插件 ： 插件要點

只需檢查是否有單擊，如果是單擊，然后切換菜單。 如小提琴所示，使用preventDefault（）。 通過檢查是否是鼠標而不是觸摸來在mouseenter和mouseleave上添加或刪除類。

    // Bind mouse events to links.
  container
    .click(myClickCallback)
    .mouseenter(myMouseenterCallback)
    .mouseleave(myMouseleaveCallback);

  // Click callback.
  function myClickCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has been invoked by touch.
    if (touchOrMouse === 'touch') {
      // Toggle .hovered class.
      list.toggleClass('show-nav');
    }

    // Do not follow the link.
    e.preventDefault();
  }

  // Mouse enter callback.
  function myMouseenterCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has not been invoked by touch.
    if (touchOrMouse === 'mouse') {
      // Add .hovered class.
      list.addClass('show-nav');
    }
  }

  // Mouse leave callback.
  function myMouseleaveCallback(e) {
    var touchOrMouse = $body.touchOrMouse('get', e);

    // If mouse event has not been invoked by touch.
    if (touchOrMouse === 'mouse') {
      // Remove .hovered class.
      list.removeClass('show-nav');
    }
  }

這是一個在iPhone上的實用示例的小提琴 ：