javascript - 使用 jquery 的搜索栏

Question

好的，我正在为一些 friend 制作的娱乐套件编写 UI。到目前为止，我有以下搜索栏:

(function($,c,b){$.map("click dblclick mousemove mousedown mouseup mouseover mouseout change select submit keydown keypress keyup".split(" "),function(d){a(d)});a("focusin","focus"+b);a("focusout","blur"+b);$.addOutsideEvent=a;function a(g,e){e=e||g+b;var d=$(),h=g+"."+e+"-special-event";$.event.special[e]={setup:function(){d=d.add(this);if(d.length===1){$(c).bind(h,f)}},teardown:function(){d=d.not(this);if(d.length===0){$(c).unbind(h)}},add:function(i){var j=i.handler;i.handler=function(l,k){l.target=k;j.apply(this,arguments)}}};function f(i){$(d).each(function(){var j=$(this);if(this!==i.target&&!j.has(i.target).length){j.triggerHandler(e,[i.target])}})}}})(jQuery,document,"outside");

var clicked;

$( document ).ready( function () {
    clicked = false;
    $(".search").click( function () {
        if (clicked == false) {
            $(".search").toggleClass("active");
            clicked = true;
        } else {
            $(".search").bind( "clickoutside", function(event){
                $(".search").toggleClass("active");
                clicked = false;
            });
        }
    });
});

.search.active {
  background: rgba(0,0,0,0.4);
  width: 500px;
}

.search {
  margin-top: 25px;
  margin-right: 25px;
  background-color: #448aff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all 500ms ease;
}

.search > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search"/>
  </form>
</div>

如您所见，它是不完整的。我正在使用这个库:http://benalman.com/projects/jquery-outside-events-plugin/

而且效果不是很好。我想要的是当搜索栏展开时，输入表单的东西在里面展开。我还发现该插件运行不佳。当我点击页面上不是搜索栏本身的任何地方时，我需要它返回到它的原始状态。有人可以帮帮我吗？我有点困惑。

Answer 1

点击外部功能不需要使用外部插件，可以自己实现。

$(document).ready(function() {
  $(".search").click(function() {
    $(this).addClass("active");
  });
  $(document).click(function(e) {
    if (!$(e.target).closest(".search").length) { //another way to do this is to stop event propagation
      $(".search.active").removeClass('active');
    }
  });
});

.search.active {
  background: rgba(0, 0, 0, 0.4);
  width: 500px;
}
.search.active form {
  display: inline-block;
}
.search {
  margin-top: 25px;
  margin-right: 25px;
  background-color: #448aff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all 500ms ease;
}
.search > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search" />
  </form>
</div>