切换焦点以跟随toggleClass

Gabriel Luethje 发表于 Dev

加布里埃尔·卢埃斯

我正在使用jQuerytoggleClass()和CSS来显示和隐藏表单的搜索表单上进行简单的显示/隐藏。这很容易，就像：

$('#site-search-toggle').click(function(e){
    $('#site-search').toggleClass('search-open');
    e.preventDefault()
});

我想做的但是很难弄清楚的是，在显示表单时将焦点放在搜索输入上，而在隐藏表单时将焦点从搜索输入上移开。

添加焦点很容易：

$('#site-search-toggle').click(function(e){
    $('#site-search').toggleClass('search-open');
    $('#site-search input[type="search"]').focus();
    e.preventDefault()
});

但是我仍然停留在如何$('#site-search-toggle')再次单击隐藏表单时将其删除的想法。

加布里埃尔·卢埃斯

好吧，我想出了这个办法，或者至少我找到了一种方法来完成我需要做的事情。我添加了第二个类，search-closed切换两个类，然后使用每个类来聚焦或模糊该字段，如下所示：

$('#site-search').addClass('search-closed');

$('.site-search__toggle').click(function(e){
    // toggle both classes
    $('#site-search').toggleClass('search-open search-closed');

    // set focus when form is visible, .search-open
    // use setTimeout to make sure the cursor actually gets in there
    // don't know why, but it works
    setTimeout (function(){
        $('#site-search.search-open .site-search__input').focus();
    }, 20);

    // blur when the form is not visible, .search-closed
    $('#site-search.search-closed .site-search__input').blur();

});