jQuery：使用相同的按钮关注/关闭文本字段

Question

（我第一次在这里发帖，希望一切顺利！）

我目前有一个包含搜索字段的隐藏 div，并且有一个按钮可以将 div 向下滑动以使其可见，当再次单击时，将 div 向上滑动以再次将其隐藏。

我还进行了设置，以便在单击按钮时选择搜索文本字段（因此访问者不必单击它 - 他们只需键入并按 Enter 即可进行搜索，从而节省更多点击次数） .

但是，当 div 消失时，会重新选择文本字段。这在 Chrome 上不是问题，但在 Safari 上，即使在 div 被隐藏后，按 Enter 键仍然有效并开始搜索（但是不能输入更多文本）。这在移动设备上也是一个问题，因为键盘已恢复，但无处可键入。

有没有办法“切换”文本字段是否被选中，类似于出现/消失？或者它只是在 div 出现时发生，也许？我对 jQuery 很陌生，所以任何帮助表示赞赏。

jQuery(function ($) {
$(document).ready(function() {
    $('#showsearch').click(function() {
            $('.search-menu').slideToggle("fast");
    });
});             
});

jQuery(function ($) {
$(document).ready(function() {
    $('#showsearch').click(function() {
            $(".search-field").focus()
    });
});
});

（其中#showsearch 是按钮，.search-menu 是 div，.search-field 是文本字段）

提前致谢！

Answer 1

试试这个，移动 safari 上的虚拟键盘应该会出现

jQuery(function ($) { 
    $('#showsearch').click(function() {
        var searchMenu = $('.search-menu'),
            isHidden = searchMenu.is(':hidden');

        searchMenu.slideToggle('fast');

        if (isHidden){
            $('.search-field').focus();
        }
    });       
});

Answer 2

您可以使用以下 sn-p 代替：

jQuery(function ($) { //this is already fired on document ready, no need other ready handler
    $('#showsearch').click(function() {
        $('.search-menu').slideToggle("fast", function(){
            if($(this).is(':visible'))
               $(this).find(".search-field").focus(); //that supposes .search-field is wrapped inside .search-menu
        });
    });       
});