我正在尝试创建一个单击后会展开的搜索栏。当用户点击其他地方时,搜索栏将恢复正常状态。
我还没有设法做到这一点,但已经让它在点击时展开。任何帮助都会很棒
$(document).ready(function(){
$("#search").click(function(){
$(this).animate({ "width": "200px"},400);
});
});
我正在尝试创建一个单击后会展开的搜索栏。当用户点击其他地方时,搜索栏将恢复正常状态。
我还没有设法做到这一点,但已经让它在点击时展开。任何帮助都会很棒
$(document).ready(function(){
$("#search").click(function(){
$(this).animate({ "width": "200px"},400);
});
});
$("#search").on('click', function(){
$(this).animate({ "width": "200px"},400);
});
$(document).on('click', ':not(#search)', function(e){
//when you click somewhere that is **not** search
if(e.target.id !== 'search') {
$("#search").animate({ "width": "50px"},400);
}
});
演示:http: //jsfiddle.net/maniator/2W2z4/
为什么要将它绑定到 body 并总是让它尝试为搜索框设置动画,即使用户没有与之交互?
$(document).ready(function () {
$("#search").focus(function () {
$(this).animate({ "width": "600px" }, 400);
}).focusout(function () {
$(this).animate({ "width": "400px" }, 400);
});
});
jsFiddle:http: //jsfiddle.net/2W2z4/3/
$('body').click(function(e){
if( e.target.id == 'search' )
{
$(e.target).animate({ "width": "200px"},400);
}
else
{
$('#search').animate({ "width": "100px"},400);
}
});