Question

我正在尝试设计一个搜索按钮。但关闭按钮在除Firefox之外的所有浏览器中都能正常工作。我不知道为什么会这样。有没有其他替代方法来实现这一目标？

(function($) {
  $.fn.searchBox = function(ev) {
    var $searchEl = $(".search-elem");
    var $placeHolder = $(".placeholder");
    var $sField = $("#search-field");


    if (ev === "open") {
      $searchEl.addClass("search-open");
    }

    if (ev === "close") {
      $searchEl.removeClass("search-open"), $placeHolder.removeClass(
        "move-up"
      ), $sField.val("");
    }

    var moveText = function() {
      $placeHolder.addClass("move-up");
    };

    $sField.focus(moveText);
    $placeHolder.on("click", moveText);

    $(".submit").prop("disabled", true);
    $("#search-field").keyup(function() {
      if ($(this).val() != "") {
        $(".submit").prop("disabled", false);
      }
    });
  };
})(jQuery);


$(".search-btn").on("click", function(e) {
  $(this).searchBox("open");
  e.preventDefault();
});
$(".close").on("click", function() {
  $(this).searchBox("close");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="searchdiv">
  <a href="#" class="search-btn"><i class="fa fa-search"></i></a>
  <div class="search-box search-elem">
    <button class="close"> X </button>
    <div class="inner row">
      <div class="small-12 columns">
        <label class="placeholder" for="search-field">Enter Search Key...</label>
        <input type="text" id="search-field">
        <button class="submit" type="submit">Submit</button>
      </div>
    </div>
  </div>
</div>

Answer 1

刚才我在Firefox中尝试过相同的操作，发现如果我使用的是JQuery CDN，则不会被Firefox下载Jquery Lib。解决方法：下载jquery并将其保存在您的服务器上，并从您的服务器访问jquery lib。

关闭按钮不在Firefox中工作

1 个答案: