Question

我正在努力使下面的JSFiddle适用于平板电脑/移动设备（例如“触摸”以及“点击”）。

https://jsfiddle.net/lkw274/7zt1zL0g/87/

<div class="user-navigation">
        <a class="mobile-menu-new" href=""><span></span>Menu</a>
</div>

$(document).ready(function() {
$(".user-navigation a.mobile-menu-new").click(function (e) {
      e.preventDefault();
    $(".user-navigation a.mobile-menu-new").toggleClass("current");
    }); 
});

.current { background: #F00;}

预期行为 单击“菜单”，通过触摸或单击鼠标，背景将突出显示为红色，直到再次单击该类时，应删除该类，删除红色背景并将其恢复为原始状态。

当前行为： 单击“菜单”，通过触摸移动设备/平板电脑设备，背景将突出显示为红色，但是当第二次单击“菜单”时，不会删除该类。

有人可以帮助了解如何修改平板电脑/移动设备的代码吗？

我已经在下面的StackOverflow链接中尝试了解决方案，但是一旦实现，这在单击时不起作用。

document-click-function-for-touch-device

提前致谢。

Answer 1

看起来event delegation是执行此操作的方法，因为当您修改目标元素时，绑定似乎失败。

尝试以下操作（适用于我的iPhone / Chrome）。

$(document).ready(function() {
    $(".user-navigation").delegate("a.mobile-menu-new", "click", function (e) {
        e.preventDefault();
        $(this).toggleClass("current");
    });
});

请注意我已使用.delegate，因为您似乎正在使用jQuery 1.6（根据您的小提琴），否则jQuery 1.7+可以使用.on，如下所示

$(document).ready(function() {
    $(".user-navigation").on("click", "a.mobile-menu-new", function (e) {
        e.preventDefault();
        $(this).toggleClass("current");
    });
});

Answer 2

添加游标：指向类属性的指针，它应该可以在移动中找到

。用户导航{ 光标：指针 }

Answer 3

def valueOf(self, key):
    node = self._bstSearch(self._root, key)
    assert node is not None, "Invalid map key."
    return node.value

def _bstSearch(self, subtree, target):
    if subtree is None:
        return None
    elif target < subtree.key:
        return self._bstSearch( subtree.left, target)
    elif target > subtree.key:
        return self._bstSearch(subtree.right, target)
    else:    
        return subtree

Answer 4

好吧，在现代 jQuery 版本中，我想是这样的：

    $(document).on('click','selector', function(e){
        e.preventDefault();
        your code here
    });

...对移动设备有用...

Jquery点击事件无法在移动设备上运行

4 个答案: