问题描述:

Right now I have it set up so a bunch of css changes when something is clicked, and then it all changes to something else again when anywhere else on the document body is clicked. Works on everything but iOS devices.

Jquery Code

jQuery(function($) {

$('#search').on('focus', function() {

$('#mobnav-trigger').css({

display: 'none'

});

$('#search_mini_form').css({

width: '100%',

transition: 'width .4s ease'

});

$('#search_mini_form .input-text').css({

height: '45px',

border: '2px solid #16a085'

});

});

$(document).on('click', function(e) {

if ( ! $(e.target).closest('#search').length ) {

$('#mobnav-trigger').css({

display: 'block'

});

$('#search_mini_form').css({

width: '48%',

transition: 'width 0s'

});

$('#search_mini_form .input-text').css({

height: '49px',

border: '0'

});

}

});

$('#mobnav-trigger').on('click', function() {

$('#search_mini_form').css({

display: 'none'

});

$('#mobnav').css({

width: '100%',

transition: 'width 0s ease'

});

$('.vertnav-top.mobile').css({

width: '100%',

maxHeight: '9999px',

transition: 'width 0s'

});

$('.vertnav-top.mobile.show').css({

maxHeight: '9999px'

});

});

$('.opener').on('click', function() {

$('#search_mini_form').css({

display: 'none'

});

$('#mobnav').css({

width: '100%',

transition: 'width 0s ease'

});

$('.vertnav-top.mobile').css({

width: '100%',

maxHeight: '9999px',

transition: 'width 0s'

});

$('.vertnav-top.mobile.show').css({

maxHeight: '9999px'

});

});

$(document).on('click', function(e) {

if ( ! $(e.target).closest('.opener').length ) {

$('#search_mini_form').css({

display: 'block'

});

$('#mobnav').css({

width: '48%',

transition: 'width 0s'

});

$('.vertnav-top.mobile').css({

width: '48%',

transition: 'width .1s',

maxHeight: '0px'

});

$('.vertnav-top.mobile.show').css({

maxHeight: '0px'

});

}

});

$('.input-text').on('focus', function() {

$('#chat-slide').css({

opacity: '0',

height: '0px'

});

});

$(document).on('click', function(e) {

if ( ! $(e.target).closest('.input-text').length ) {

$('#chat-slide').css({

opacity: '1',

height: '35px',

transition: 'all .4s ease'

});

}

});

});

This is driving me crazy. No idea how to fix this to work on these devices. Any help appreciated.

网友答案:

Found one solution. It turns out just setting the CSS rule "cursor: pointer;" to the element makes the iOS devices recognize it as click instead of touch. Since this is a mobile version of a desktop site, this is an acceptable solution for me.

相关阅读:
Top