扩展搜索栏

我正在开发一个video网页，比如YouTube或Vimeo ……我现在正在搜索输入…我正在谷歌搜索指南，我找到了这个： http ： //tympanus.net/codrops / 2013/6月26日/扩展的搜索栏，解构/

我几乎已经完成了它，但问题是，发布它的人，使用Javascript，而不是使用JQuery（更容易……）

我一直在尝试修改代码，当你点击按钮时会出现搜索输入，但它不会消失……你能帮我解决这个问题吗？

使用Javascript：

;( function( window ) { function UISearch( el, options ) { this.el = el; this.inputEl = el.querySelector( 'form > input.sb-search-input' ); this._initEvents(); } UISearch.prototype = { _initEvents : function() { var self = this, initSearchFn = function( ev ) { if( !classie.has( self.el, 'sb-search-open' ) ) { // open it ev.preventDefault(); self.open(); } else if( classie.has( self.el, 'sb-search-open' ) && /^\s*$/.test( self.inputEl.value ) ) { // close it self.close(); } } this.el.addEventListener( 'click', initSearchFn ); this.inputEl.addEventListener( 'click', function( ev ) { ev.stopPropagation(); }); }, open : function() { classie.add( this.el, 'sb-search-open' ); }, close : function() { classie.remove( this.el, 'sb-search-open' ); } } // add to global namespace window.UISearch = UISearch; } )( window ); 

我的JQuery代码：

  $(document).ready(function () { $("#search_container").click(function(){ if(!$("#search_container").hasClass("open")){ $("#search_container").addClass("open"); } }); $(".search_input").click(function(){ if($("#search_container").hasClass("open")){ if($(".search_input").val() == ""){ $("#search_container").removeClass("open"); } else { // Search } } }); }); 

我的HTML代码：

Answer 1

你可以通过组合一个小css和jQuery的.animate（）函数来实现它。

这是JS部分，请参阅现场演示的小提琴

 $(document).ready(function () { $("#btnsearch").on('click',function(e){ e.preventDefault(); e.stopPropagation(); /* Check if field is already displayed, if not, displays it, else, submit */ if($('#search_container').hasClass('closed')){ $('#search_container').toggleClass('closed'); $('#hint').html(''); $('#search').animate({ right: '40px', }, 200, function(){ /* * Bind event to hide field when clicking OUT * use .one() instead of .on() to avoid stacking binding click events on document */ $(document).one('click', function(){ $('#search_container').toggleClass('closed'); $('#search').animate({ right: '-200px', }, 200); $('#hint').html(''); }); }); } else { /* Add here your field entry check */ /* Submit your form with $('#myform').submit(); */ $('#hint').html("Your form has been submitted with $('#myform').submit();"); } }); $('#search').on('click',function(e){ /* Needed to avoid closing field when clicking on it */ e.preventDefault(); e.stopPropagation(); }); }); 

现场演示

Answer 2

使用CSS（或jQuery .animate({width: '100%'}) ）可以实现滑动效果。 此外，您正在删除类，但从不添加它。

 $(document).ready(function() { $('.input-wrapper') .click(function() { $(this).toggleClass('active'); $('input', this).focus(); }) .focusout(function() { $(this).removeClass('active'); }); }); 

 .wrapper { width: 200px; background-color: #ddd; padding: 10px 25px; } .input-wrapper { width: 25px; height: 25px; overflow: hidden; position: relative; float: right; -webkit-transition: width .5s; /* For Safari 3.1 to 6.0 */ transition: width .5s; } .input-wrapper input { width: 100%; border: none; } .input-wrapper.active { width: 100%; } .input-wrapper:after { content: '?'; width: 25px; height: 25px; text-align: center; font-weight: bold; background-color: red; color: black; line-height: 20px; font-size: 20px; display: block; position: absolute; right: 0; top: 0; } .clear { clear: both; }