jquery - 如何隐藏然后向左滑动搜索框？

Question

我是 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>

查询

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

Answer 1

你必须添加一个图像来触发滑出(这个输入在隐藏时不可点击 :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;溢出:隐藏；并将其设置为正常。

$(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 animate documentation (animate代替slide，slide不做leg/right，animate可以)

更全局化的小旁注:
* 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