2

我是 Jquery 的新手，无法理解这一点。

我有一个搜索图标，当按下它时，我希望搜索框向左滑出，但无法绕开它。是否有任何有用的教程，或者有人可以让我知道我在我的 Jquery 中做错了什么。

谢谢

HTML：

<div id="search-container">
    <div class="search-bar">
        <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">                   
    </div>
    <button type="submit" name="ctl00$btnSearch" value="Go" id="ctl00_btnSearch" class="searchbutton search-bg show"></button>                       
</div>

jQuery

$(document).ready(function() {
   $('#search-container input').click(function() {
   $(this).next().slideToggle();
  });
});
4

2 回答 2

4

您必须添加图像才能触发滑出（隐藏时此输入不可点击：P）

你会得到这样的东西：

<div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''">           
</div>
<img src="SomeImage.png" class="trigger"/>

然后将.search-bar{ width: 0; overflow:hidden;}其设置为正常的动画。

$(document).ready(function() {
    $('#search-container .trigger').click(function() {
        // Hide the trigger image:
        $(this).animate({width:0},1000);
        // At the same time slide the div open
        $('.search-bar').animate({width: 'toggle'},1000, function(){
            // This function/ code will be executed on complete:
            $(this).find('input')[0].focus(); // For bonus, the input will now get autofocus
        });
    });
});

-> jQuery动画文档（动画代替幻灯片，幻灯片不做legt/right，动画可以）

更全球范围的小旁注：
*form元素不滑动或动画。为这些添加一个包装 div。
* 宽度变窄的元素会使内容p变得小而怪异。给它们一个宽度以防止这种情况

用 css3 更新

已经有一段时间了，有一个（更好的？）替代方案，css3 过渡：

.menu{
    overflow: hidden;
    max-width: 0;
    width: 200px;
    transition: max-width 1s
}
.Opened.menu{
    max-width: 200px; /* Has to be a number, 'none' doesnt work */
}

结合 jQuery .toggleClass()，这很容易，并且您将一些样式控制返回给 css。提示：除了类，您还可以使用:hover

于 2013-08-09T11:34:34.910 回答
3

查看以下代码：

HTML

<div id="search">
<img src="https://cdn0.iconfinder.com/data/icons/strabo/24/magnifying_glass.png" class="trigger"/> 
    <div class="search-bar">
    <input name="ctl00$txtSearch" type="text" id="ctl00_txtSearch" class="searchbox" value="Search" onfocus="this.value=''"/>           
</div>
</div>

JavaScript：

$(document).ready(function() {
    $('#search .trigger').click(function(){
        $('.search-bar').animate({width: 'toggle'},1500);
    });
});

CSS：

.search-bar{ width: 200;overflow:hidden; }
.trigger{cursor:pointer;}

小提琴：http: //jsfiddle.net/FdEC5/

于 2013-08-09T13:18:45.750 回答