jquery点击事件在移动设备上不起作用

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。检查下面更新的 sn-p

$(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>