Question

我正在尝试为移动设备显示侧边栏。当我点击一个元素时，我想用子菜单打开那个li标签。在浏览器中它运行良好，但在移动设备上它不起作用。

我还尝试使用＆＃34; touchstart ＆＃34;而不是点击。这里的问题是，当我触摸元素并开始滚动时，子菜单将打开。我点击/点击它时只想打开它。

任何人都可以帮我解决这个问题吗？

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。查看下面的更新代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

2 个答案: