展开搜索栏 onclick答案

【问题标题】：expand search bar onclick展开搜索栏 onclick
【发布时间】：2014-03-18 10:08:39
【问题描述】：

好吧，我正在尝试做一个基本的 jQuery 示例，在鼠标单击时扩展搜索栏，我不明白为什么我的代码没有发生任何事情。当我点击我的（按钮 class="expand"）时，我有一个基本的 jQuery 来显示输入，但是当我点击这个按钮时，在 css 中设置为 display:none 的输入不会出现。

我的基本 jQuery 脚本：

<script type="text/javascript">     
$('.expand').click(function() {
$('#test').show(500);

});

我的html：

 <nav id="menu">
        <ul>

            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contacts</a></li>      
            <li id="sb-search" style="float:right; list-style:none; height:20px;">
            <div id="pesquisar-container">
            <span id="pesquisar" class="form-container cf">
            <form  name="form1" >
                <input id="test" type="search" placeholder="Pesquisar..." 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：

     .form-container input {
    width: 150px;
    height: 25px;
    padding: 5px 5px;
    float: left;    
    font: bold 15px;
    font-size:15px;
    font-family:'bariol_lightlight';
    border: 0;
    background: #f3f3f3; /*#fcfcfc se o fundo for branco, ver as diferenças */
    border-radius: 3px 0 0 3px;  
    margin-top: 9px;  
    color:#000;  
    display:none;
}

    .form-container button {
        overflow: visible;
        position: relative;
        float: right;
        border: 0;
        padding: 0;
        cursor: pointer;
        height: 25px;
        width: 35px;
        text-transform: uppercase;
        background: #363f48;
        border-radius: 0 5px 5px 0;      
        text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
        margin-top:9px;
    }

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

尝试将您的代码包装在 DOM ready 处理程序 $(function() {...});

$(function() {
    $('.expand').click(function() {
        $('#test').show(500);
    });
});

【讨论】：

谢谢老兄，就是这样！也感谢您提供的文档链接，很高兴能理解我的错误。

【解决方案2】：

可能有几个原因。 1. 将您的点击监听器放在准备好的文档上 2.更好地为按钮分配一些id。假设它的 btnSubmit。 3. 可以使用以下方法显示或隐藏元素。

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

或者最好使用切换。

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        $("#test").toggle();
    }); 
});

希望这会有所帮助。

【讨论】：