在点击bug上展开搜索输入栏

时间:2014-03-19 21:49:02

标签: javascript jquery css css3

好吧,我试图在我的按钮class =“expand”中点击进行搜索输入扩展。 我已经有了这个工作,但它至少有两个错误。 第一种是当我单击按钮以展开输入时,输入会扩展,但会立即收缩。我不明白为什么会这样。 第二个错误是无论我点击我的页面,输入都会立即扩展和收缩。我认为是使用$('html').click(function(),但我没有看到其他方式来做到这一点。 你能给点帮助吗?

我的jQuery:

 <script type="text/javascript">        
        $(function() {
            $('button.expand').click(function() {
                $('#test').width(0).show().animate({width: 180}, 500);
            });
            $('html').click(function() {
            $('#test').width(180).show().animate({width: 0}, 500);
        });
        });  
    </script> 

我的Html:

<nav id="menu">
        <ul>

            <li><a href="Home.html">Home</a></li>
            <li><a href="About.html">About</a></li>


            <li>
                  <div id="search-container">
        <span id="search" >
             <form  name="form1" >
                <input id="test" type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
                <button class="expand" type="submit"><i class="fa fa-search"></i></button>
             </form>
        </span> 
    </div>
            </li>
           </ul>
    </nav>   

我的css: CSS:

 .form-container input {display:none;}

2 个答案:

答案 0 :(得分:1)

如何控制#test可见性的状态?

$(function() {
    $('button.expand').click(function() {
        $('#test').width(0).show().animate({width: 180}, 500);
        $('#test').addClass("visible");
    });
    $('html').click(function() {
        if($('#test').hasClass("visible")){
            $('#test').width(180).show().animate({width: 0}, 500).removeClass("visible");
        }
    });
});  

答案 1 :(得分:0)

您可以查看jQuery Animate docs和stackoverflow的答案Onclick Expand Textbox Width。希望这能帮助你。