Question

现在我已经设置了这样一些css在点击某些内容时会发生变化，然后当点击文档正文上的任何其他内容时，它会再次变为其他内容。适用于iOS设备以外的所有设备。

Jquery代码

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'
        });
    }
});
});

这让我发疯了。不知道如何解决这个问题在这些设备上工作。任何帮助表示赞赏。

Answer 1

找到一个解决方案。事实证明只是设置CSS规则“cursor：pointer;”对该元素使iOS设备将其识别为点击而不是触摸。由于这是桌面网站的移动版本，因此对我来说这是一个可接受的解决方案。

点击iphone / ipad bug的jquery文件？

1 个答案: