javascript - 为什么我的h1标题在slideUp执行时隐藏在输入框后面

Question

我有以下页面，这是一个 wikisearch 页面，可以查询多个 wikipidia 页面的搜索词。该页面在中间某处有标题和输入框；但是，当我单击该按钮时，标题会向上滑动，输入框也会向上滑动。但是输入框一直向上滑动覆盖标题。我想!...如何防止输入框覆盖标题？还是让标题停留在页面顶部？谢谢

$(document).ready(function() {
  //bringing focus to search box
  window.load = function() {
    document.getElementById("search-box").focus();
  };

  //listener for search button
  $("#search").click(function() {
    $("#title").slideUp(3000);
    // $("#title").css("text-align", "left");
    search();
  });

  function search() {
    //grabbing the id of search result div
    var srchResult = document.getElementById("results");
    //string entered by user for search
    var searchStr = document.getElementById("search-box").value;
    //replace space with _ in search query
    searchStr = searchStr.replace(" ", "_");
    console.log(searchStr);

    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchStr + "&prop=info&inprop=url&utf8=&format=json",
      dataType: "jsonp",
      success: function(response) {
        if (response.query.searchinfo.totalhits === 0) {
          showError(searchStr);
        } else {
          displayResults(response);
        }
      },
      error: function() {
        alert("Something went wrong.. <br>" +
          "Try again!");
      }

    });

    function displayResults(response) {

      console.log(response.query);

      var search = response.query.search;
      var srchLength = response.query.search.length;

      srchResult.innerHTML = "";
      // console.log(srchResult.innerHTML);

      //pulling title and searchbox to top
      // $("#title").css("margin-top:", "10px !important");

      for (var i = 0; i < srchLength; i++) {
        srchResult.innerHTML += '<div class="output"><h4><a href="https://en.wikipedia.org/wiki/' + search[i].title.replace(' ', '_') + '" target="_blank">' + search[i].title + '</a> </h4><p>' + search[i].snippet + '</p></div>';

      }
    }
    return false;
  }

  function showError(search) {
    srchResult.innerHTML = '<div class="output text-center"><h4>No Search result for: ' + search + '</h4></div>';
  }
});

body {
  background-color: #495444;
}

search-input {
  width: 90%;
}

center {
  align-left: auto;
  align-right: auto;
  text-align: center;
}

.output {
  background-color: white;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  opacity: 0.5;
  margin-top: 10px;
}

h1 {
  margin-top: 200px;
  color: #1484e5;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 50px;
  padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<div class="container ">
  <h1 id="title" class="text-center"><strong>WikiSearch</strong></h1>

  <div id="input" class="input-group col-lg-8 offset-lg-2 col-md-8 offset-md-2 col-xs-12">
    <input id="search-box" type="text" class="form-control" placeholder="Search Wikipidia Pages!..." />
    <button id="search" class="btn btn-primary" onclick="#">Search</button>
  </div>

  <div id="results" class="col-lg-8 offset-lg-2">

  </div>
</div>

Answer 1

代替使用 $('#title').slideUp(3000)尝试使用 $('#title').animate({'margin-top': '0'}, 3000);

那么标题将保留。

此外，您可能想要删除 onclick="#"来自 <button id="search" class="btn btn-primary" onclick="#">Search</button>

示例如下。

$(document).ready(function() {
  //bringing focus to search box
  window.load = function() {
    document.getElementById("search-box").focus();
  };

  //listener for search button
  $("#search").click(function() {
  $('#title').animate({'margin-top': '0'}, 3000);
    //$("#title").slideUp(3000);
    // $("#title").css("text-align", "left");
    search();
  });

  function search() {
    //grabbing the id of search result div
    var srchResult = document.getElementById("results");
    //string entered by user for search
    var searchStr = document.getElementById("search-box").value;
    //replace space with _ in search query
    searchStr = searchStr.replace(" ", "_");
    $.ajax({
      url: "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + searchStr + "&prop=info&inprop=url&utf8=&format=json",
      dataType: "jsonp",
      success: function(response) {
        if (response.query.searchinfo.totalhits === 0) {
          showError(searchStr);
        } else {
          displayResults(response);
        }
      },
      error: function() {
        alert("Something went wrong.. <br>" +
          "Try again!");
      }

    });

    function displayResults(response) {


      var search = response.query.search;
      var srchLength = response.query.search.length;

      srchResult.innerHTML = "";
      // console.log(srchResult.innerHTML);

      //pulling title and searchbox to top
      // $("#title").css("margin-top:", "10px !important");

      for (var i = 0; i < srchLength; i++) {
        srchResult.innerHTML += '<div class="output"><h4><a href="https://en.wikipedia.org/wiki/' + search[i].title.replace(' ', '_') + '" target="_blank">' + search[i].title + '</a> </h4><p>' + search[i].snippet + '</p></div>';

      }
    }
    return false;
  }

  function showError(search) {
    srchResult.innerHTML = '<div class="output text-center"><h4>No Search result for: ' + search + '</h4></div>';
  }
});

body {
  background-color: #495444;
}

search-input {
  width: 90%;
}

center {
  align-left: auto;
  align-right: auto;
  text-align: center;
}

.output {
  background-color: white;
  border-color: black;
  border-width: 1px;
  border-style: solid;
  opacity: 0.5;
  margin-top: 10px;
}

h1 {
  margin-top: 200px;
  color: #1484e5;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 50px;
  padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<div class="container ">
  <h1 id="title" class="text-center"><strong>WikiSearch</strong></h1>

  <div id="input" class="input-group col-lg-8 offset-lg-2 col-md-8 offset-md-2 col-xs-12">
    <input id="search-box" type="text" class="form-control" placeholder="Search Wikipidia Pages!..." />
    <button id="search" class="btn btn-primary">Search</button>
  </div>

  <div id="results" class="col-lg-8 offset-lg-2">

  </div>
</div>