Question

我正在开发视频网页，例如YouTube或Vimeo ...... 我现在正在搜索输入...我在谷歌搜索有关向导的内容，我找到了这个：http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

我差不多完成了它，但问题是，发布它的人用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代码：

    <div id="search_container">
<form>
<input type="search" class="search_input" placeholder="Búsqueda" id="search" value="" />
<input type="submit" class="search_submit" value="" />
<span class="btn icon_search"></span>
</form>
</div>

Answer 1

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="input-wrapper">
    <input type="text" placeholder="Enter your search term..." />
  </div>
  <div class="clear"></div>

  <div class="input-wrapper">
    <input type="text" placeholder="Enter your search term..." />
  </div>
  <div class="clear"></div>

  <div class="input-wrapper">
    <input type="text" placeholder="Enter your search term..." />
  </div>
  <div class="clear"></div>

  <div class="input-wrapper">
    <input type="text" placeholder="Enter your search term..." />
  </div>
  <div class="clear"></div>
</div>

＆＃13;

Answer 2

你可以通过组合一个小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();
});
});

LIVE DEMO HERE

扩展搜索栏

2 个答案: