jQuery - переключать поле поиска с помощью ссылки, а также с помощью Blur ()

Question

Я не знаю, почему это меня вешает прямо сейчас, но я пытаюсь создать поле ввода для поиска, которое открывается при нажатии на значок увеличительного стекла и сразу же фокусируется. При повторном нажатии на значок поле скрывается -ИЛИ- когда вы щелкаете в любом месте (размытие ()), поле скрывается. Я могу заставить его работать простым переключателем значков, но мои функции щелчка и размытия конкурируют друг с другом, где, когда я нажимаю на значок, чтобы закрыть поле, которое также запускает функцию размытия.

Я уверен, что есть суперпростое решение, но оно уклоняется от меня на данный момент. Кто-нибудь может указать мне правильное направление?

Вот ссылка на простую настройку кода: https://jsfiddle.net/tylorreimer/g7jcwqn1/2/

$('a.search-toggle').click(function () {
    if (!$('.search-field').hasClass('open')) {
        $('.search-field').addClass('open').focus();
    }
});

$('.search-field').blur(function () {
    $(this).removeClass('open');
});