jquery klicken Ereignis funktioniert nicht auf mobilen Geräten

Question

Ich versuche, eine Sidebar für mobile Geräte anzuzeigen. Wenn ich auf ein Element klicke, öffne ich dieses li-Tag mit einem Untermenü. Im Browser funktioniert es gut, aber auf mobilen Geräten funktioniert es nicht.

Ich habe auch versucht, "Touchstart" statt klicken zu verwenden. Das Problem hier ist, wenn ich das Element berühre und mit dem Scrollen anfange, wird das Untermenü geöffnet. Ich möchte es nur öffnen, wenn ich darauf klicke/angeklickt habe.

Kann mir jemand mit diesem Problem helfen?

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

können Sie mousedown für diese. Überprüfen aktualisiert Snippet

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

eine andere Art und Weise versuchen, es zu machen, Berührungsstartereignis verwenden, funktioniert es auf mobilen Geräten:

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