展开搜索栏不搜索后关闭和重新打开它，Jquery

Question

我正在创建一个扩展的搜索栏。

我使用这个演示作为基础:http://codepen.io/nikhil/pen/qcyGF/

如果你打开搜索栏，在输入框中写一些东西，然后再次点击按钮，搜索栏就会起作用

但是如果你打开它，在输入中写一些东西，通过点击搜索栏外面的按钮关闭它，然后再次打开它;点击按钮将会再次关闭搜索栏。我怎样才能改变代码的方式，如果我关闭并重新打开搜索栏，它会搜索另一个点击按钮?

HTML:

<div class="container">
<form class="searchbox">
    <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required>
    <input type="submit" class="searchbox-submit" value="GO">
    <span class="searchbox-icon">GO</span>
</form>

theecodeblock详细教程

CSS:

    body{
    background:#475f77;
}
.container{
    width:600px;
    margin:50px auto;
}
.searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    float:right;
    overflow:hidden;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
.searchbox-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;
}
.searchbox-input::-webkit-input-placeholder {
    color: #d74b4b;
}
.searchbox-input:-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input::-moz-placeholder {
    color: #d74b4b;
}
.searchbox-input:-ms-input-placeholder {
    color: #d74b4b;
}
.searchbox-icon,
.searchbox-submit{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    color:#dcddd8;
    background:#172b3c;
}

.searchbox-open{
    width:100%;
}
.byline{
  position:absolute;
  top:150px;
  left:30%;
  text-align:center;
  font-size:18px;
}
.byline a{
  text-decoration:none;
  color: #d74b4b;
}

Jquery:

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

Answer 1

代码库只是打开和关闭搜索栏

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

我将改变else (search bar open)代码来执行搜索