jQuery的click事件不工作在移动设备上

Question

我试图展示用于移动设备的侧栏。当我点击一个元素时，我想用子菜单打开那个li标签。在浏览器中它工作正常，但在移动设备上它不工作。

我还试图用“touchstart”，而不是点击。这里的问题是，当我触摸元素并开始滚动时，子菜单将打开。我只想在点击/点击时打开它。

谁能帮我解决这个问题？

HTML：

<li> 
    <a class="filter-attribute"><i class="fa fa-chevron-down pull-right"></i>head1</a> 
     <ul class="child"> 
     <li class="filter-item"><input type="checkbox" name="attributeItems[]">sub1</li> 
     </ul> 
</li> 

的jQuery：

$(document).on("click", ".filter-attribute", function() { 
$(this).next('.child').fadeToggle("slow"); 
}); 

Answer 1

您可以使用mousedown这一点。检查更新的摘要如下

$(document).on("mousedown", ".filter-attribute", function() { 
 
    $(this).siblings('.child').fadeToggle("slow"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li> 
 
    <a class="filter-attribute"><i class="fa fa-chevron-down pull-right"></i>head1</a> 
 
     <ul class="child"> 
 
     <li class="filter-item"><input type="checkbox" name="attributeItems[]">sub1</li> 
 
     </ul> 
 
</li> 
 
</ul>

Answer 2

尝试另一种方式来做到，使用touchstart事件，它适用于移动设备：

$(document).on("click touchstart", ".filter-attribute", function (e) { 
 
    $(this).closest("li").find('.filter-item').fadeToggle("slow") 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li> 
 
    <a class="filter-attribute"><i class="fa fa-chevron-down pull-right"></i>head1</a> 
 
     <ul class="child"> 
 
     <li class="filter-item"><input type="checkbox" name="attributeItems[]">sub1</li> 
 
     </ul> 
 
</li>