Question

好吧，我正在尝试做一个基本的jQuery示例，在鼠标单击时扩展搜索栏，我不明白为什么我的代码没有发生任何事情。当我点击我的（按钮类=“展开”）时，我有一个基本的jQuery来显示输入，但是当我点击这个按钮时，在css中设置的输入显示：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;
    }

Answer 1

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

中

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

Answer 2

可能有几个原因。 1.将您的单击侦听器放在文档上 2.更好地为按钮指定一些id。让我们说它的btnSubmit。 3.以下方法可用于显示或隐藏元素。

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

或者更好地使用切换。

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

希望这会有所帮助。

展开搜索栏onclick

2 个答案: