So i have this click function that toggles a dropdown-menu, but on Smartphones this is slow and not smooth.

Is there any other way to make this dropdown work with a smooth transition on any mobile device using jQuery?

(I've heard about "vclick" but couldn't find out how to make this work.

$j('.dropdown-menu').click(function() {
$j('.dropdown-menu').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideDown("slow");
});


$j('.dropdown-menu').blur(function() {
$j('.dropdown-inside').hide('slow', function() {
});
});

So i have this click function that toggles a dropdown-menu, but on Smartphones this is slow and not smooth.

Is there any other way to make this dropdown work with a smooth transition on any mobile device using jQuery?

(I've heard about "vclick" but couldn't find out how to make this work.

$j('.dropdown-menu').click(function() {
$j('.dropdown-menu').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideDown("slow");
});


$j('.dropdown-menu').blur(function() {
$j('.dropdown-inside').hide('slow', function() {
});
});

• javascript
• jquery
• mobile

• vclick is a custom event only available in JQM framework. – Omar Commented Jul 6, 2014 at 18:57

3 Answers 3

Try the click on Id rather then class. Class is always slow. So suppose if your dropdown has id like 'myDropdown' then do it like

$j('#myDropdown').click(function(){
    //your code here
});

The first part can be simplified to this:

$j('.dropdown-menu').click(function() {
    $j('.dropdown-menu').not(this).children('ul').slideToggle(2000);
});

Also, try wrapping the hidden content in a div and giving it a width. When you click on the div, it actually pulls it out of position to measure it before quickly replacing it because JQuery doesn't know the dimensions of your hidden div until it's displayed. So . This could make the whole animation laggy!

Another suggestion:

ID is faster than class. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.

If you must use a class or attribute selector, you can improve performance by specifying the optional context parameter.

Credits

Cause
According to Google :
...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

Solution
1. Use fastclick.js to get rid of this 300ms lag
https://github./ftlabs/fastclick
2. Use application cache to speed up the load
https://developer.mozilla/en-US/docs/Web/HTML/Using_the_application_cache