Javascript 展开搜索栏搜索前不展开

运行此搜索时存在两个问题。 1：单击放大镜时，它会立即搜索，而不是打开搜索栏。2：如果键入的字符超过2个，然后搜索栏关闭（通过单击关闭），然后重新打开（通过单击返回），则搜索按钮和搜索文本不会正确对齐

HTML:

JS:

---

当搜索框未展开时，将脚本更改为以下命令以防止默认的单击事件：

submitIcon.click(function (event) {
                if (isOpen == false) {
                    event.preventDefault();
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });

.cm-processed-form{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;

    -webkit-transition: width 0.1s;
    -moz-transition: width 0.1s;
    -ms-transition: width 0.1s;
    -o-transition: width 0.1s;
    transition: width 0.1s;
}

.ty-search-block__input{
    top:0;
    right:0;
    border:0;
    outline:0;
    background:#dcddd8;
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color:red;
}
.ty-search-block__input::-webkit-input-placeholder {
    color: #d74b4b;
}
.ty-search-block__input:-moz-placeholder {
    color: #d74b4b;
}
.ty-search-block__input::-moz-placeholder {
    color: #d74b4b;
}
.ty-search-block__input:-ms-input-placeholder {
    color: #d74b4b;
}

.ty-search-magnifier{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding-top:10px;
    margin:0;
    border:0;
    outline:0;
    line-height:30px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}

.cm-processed-form-open{
    width:100%;
}

$(document).ready(function(){
            var submitIcon = $('.ty-search-magnifier');
            var inputBox = $('.ty-search-block__input');
            var searchBox = $('.cm-processed-form');
            var isOpen = false;
            submitIcon.click(function(){
                if(isOpen == false){
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });  
             submitIcon.mouseup(function(){
                    return false;
                });
            searchBox.mouseup(function(){
                    return false;
                });
            $(document).mouseup(function(){
                    if(isOpen == true){
                        $('.ty-search-magnifier').css('display','block');
                        submitIcon.click();
                    }
                });
        });
            function buttonUp(){
                var inputVal = $('.ty-search-block__input').val();
                inputVal = $.trim(inputVal).length;
                if( inputVal !== 0){
                    $('.ty-search-magnifier').css('display','none');
                } else {
                    $('.ty-search-block__input').val('');
                    $('.ty-search-magnifier').css('display','block');
                }
            }

submitIcon.click(function (event) {
                if (isOpen == false) {
                    event.preventDefault();
                    searchBox.addClass('cm-processed-form-open');
                    inputBox.focus();
                    isOpen = true;
                } else {
                    searchBox.removeClass('cm-processed-form-open');
                    inputBox.focusout();
                    isOpen = false;
                }
            });