需要单击两次才能在移动设备上触发.click事件

Question

下面的

是我的下拉菜单的jquery代码：

$(function(){

    $(".toggleMenu").click(function(e) {
    e.preventDefault();
    $(".menu").toggle();
});

    var ww = document.body.clientWidth;
    if (ww < 1000) {
        $(".toggleMenu").css("display", "inline-block");
        $(".menu").hide();
        $(".menu ul li a").click(function() {
            $(this).parent("li").toggleClass('hover');
        });
    } else {
        $(".toggleMenu").css("display", "none");
        $(".menu li").hover(function() {
            $(this).addClass('hover');
        }, function() {
            $(this).removeClass('hover');
        });
    }

})

我要做的是将“hover”类添加到点击的“a”的“li”中，以便下拉菜单在移动设备（我的情况下小于1000px的设备）上正常工作。但是使用上面的代码，我需要点击两次到下拉到apper的任何“a”元素，据我所知，当我点击“a”元素时，应该将“hover”类添加到其父级“应该显示li“元素和它下面隐藏的”ul“（因为我已经用这种方式编写了css）但是此刻我应该点击”a“元素两次（不是双击）.html结构是像：

<ul>
  <li>
    <a></a>
    <ul>
     <li><a></a></li>
     <li><a></a></li>
   </ul>
  </li>
</ul>