jQuery扩展搜索图标输入，不是很有效

Question

我有这个搜索框，到目前为止我已经做过了，但对JS来说是新的，所以有点卡住了。

我猜有点像这样的东西……http://codepen.io/nikhil/pen/qcyGF --这也是我一直在尝试的基础。

​

searchExpand = function(elm){
  var spanIcon = $('.span-icon'),
  searchInput = $('.search-input'),
  searchForm = $('.search-form'),
  btnSearch = $('.btn-search'),
  isOpen = false;

  if(isOpen == false){
    searchForm.addClass('open');
    spanIcon.hide();
    btnSearch.show();
    searchInput.focus();
    isOpen = true;
  } else {
    searchForm.removeClass('open');
    btnSearch.hide();
    spanIcon.show();
    searchInput.focusout();
    isOpen = false;
  }
}

$(document).ready(function(){
  
  // lets make the search feature happen!
  $(document).on("click", "span.btn-search", function() {
    searchExpand(this);
  });

});

.search-form {
  width: 0%;
}

.search-form input {
  border-right-style: none;
}

.search-form button {
  background: none;
  padding: 0;
  display: none;
}

.search-form button i {
  font-size: 1.9em;
  color: #000;
  padding: 10px;
}

.search-form span.search-icon {
  font-size: 1.9em;
  color: #000;
  padding: 10px;
  cursor: pointer;
}

.search-form .form-control {
  padding: 0;
  border: 0;
}

.search-form .input-group-addon {
  background: #fff;
  border: 0;
}

.search-form.open {
  width: 100%;
}

.search-form.open .form-control {
  padding: 30px 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form role="search" class="search-form">
  <div class="input-group add-on">
    <input type="text" class="form-control search-input" placeholder="Enter a search term" name="search" id="search">
    <div class="input-group-addon">
      <button class="btn btn-clear btn-search" type="submit"><i class="glyphicon glyphicon-search search-icon"></i></button>
      <span class="span-icon glyphicon glyphicon-search search-icon"></span>
    </div>
  </div>
</form>

​

Answer 1

注意，您的.btn-search不在一个范围内，因此您的函数searchExpand将不会运行。当你点击按钮的时候。

跨度中的内容是" span -icon glyphicion...“

如果你正在使用jquery，这将是实现你想要的东西的一种有效方法：

为span分配一个ID，您可以随意命名它，并更改js以反映：

 $( "#yourbuttonidname" ).click(function() {
    searchExpand(this);
  });

新跨度的示例：

<span id="yourbuttonidname" class="span-icon glyphicon glyphicon-search search-icon"></span>