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>