Question

1-我点击搜索图标触发下拉搜索。

// Open/Close Search Form and focus in input search field. THIS IS ON DOM READY !
$('.search-trigger').click(function () {
    $(this).find('i').toggleClass('icon-close', 'icon-search');
    $('.search-dropdown').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
    $('.search-dropdown .search-field').focus();
});

2- 在任何手机或标签上，如果点击图标，则会弹出虚拟键盘，因为$('.search-dropdown .search-field')已聚焦且高度 { {1}} 将更改。

3-问题：

A - 如果我想关闭调整大小时的下拉搜索（当用户更改移动设备或标签的方向时），我可以执行以下操作：< / p>

$(window)/$(document)

但是，当我知道高度会发生变化，当用户点击图标时，我无法执行 A - ，因为下拉搜索会显示为第二次然后关闭！

B - 因此，为了确保下拉搜索可见，我可以执行以下操作：

$(window).on('resize', function () { // THE DOM IS READY
    $('.search-trigger .icon-search').removeClass('icon-close');
    $('.search-dropdown').hide();
});

现在代码将起作用，下拉搜索将起作用，如果用户更改方向，则下拉列表将关闭。但是，因为宽度不再与原始宽度相同（用户更改了方向），如果单击搜索图标，下拉搜索将会显示一秒钟然后关闭！

因此，你可以看到它很棘手，我尝试了很多变化......
我已经搜索了很多，现在是时候让我帮忙:)

提前感谢您的帮助和建议：）

Answer 1

贝娄是完整的代码解释

/*
 * Before opening the Header Search Form,
 * do not waste time by creating jQuery object from window multiple times.
 * Do it just once and store it in a variable.
 * This is done to take care of the performance.
 */ 
var $window = $(window);
var originalHeight = $(window).height();
var originalWidth = $(window).width();
//3. Open/Close Header Search Form
$('.search-trigger').click(function () {
    $(this).find('i').toggleClass('icon-close');
    $('.search-dropdown').animate({
        height: 'toggle',
        opacity: 'toggle'
    });
    // Reset the initial state of the search icon and dropdown
    // Since the height will change when the virtual keybord becomes visible,
    // I don't need to put it inside the resize event and double check it !
    if ($('.icon-close').is(':visible')) {
        if ($window.height() !== originalHeight) {
            $(this).find('i').addClass('icon-close');
            $('.search-dropdown').show();
        }
        $window.resize(function () {
            /* 
             * Do not calculate the new window width twice.
             * Do it just once and store it in a variable.
             */
            var newWidth = $window.width();
            // Do the comparison
            if (originalWidth !== newWidth) {
                // Execute the code
                $('.search-trigger .icon-search').removeClass('icon-close');
                $('.search-dropdown').hide();
                // Reset the width  
                // This is the tricky part that I was misssing :(
                originalWidth = newWidth;
            }
        });
    }
    //  Focus in input search field
    $('.search-dropdown .search-field').focus();
});
// Reset Search Input Value to Search...    
$('input.search-field').val('');

希望这可以在类似的问题上帮助其他人 SYA：）

虚拟键盘和调整大小事件

1 个答案: