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>

TheCodeBlock

的详细教程

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（搜索栏打开）代码来进行搜索。

Jquery在关闭并重新打开搜索栏后不会进行搜索

1 个答案: