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

绝对使用// startup and initialize empty tables for appearance $(function ($) { createDataTableForAvailableHOstock("#availableHOstockForOrder", null); createDataTableSelectedHOStock('#selectedHOStockToOrder', null); // set up event handlers for both directrions $('#selectedHOStockToOrder').on("click", "tbody button", function (evt) { moveRow(evt, '#selectedHOStockToOrder', '#availableHOstockForOrder'); }) $('#availableHOstockForOrder').on("click", "tbody button", function (evt) { moveRow(evt, '#availableHOstockForOrder', '#selectedHOStockToOrder'); }) })//end startup and initialize empty tables for appearance // create data table for createDataTableForAvailableHOstock. function createDataTableForAvailableHOstock(target, data) { $(target).DataTable({ info: true, searching:true, paging: true, data: list, columnDefs: [{ targets: [-1], render: function () { return "<button type='button' onclick='saveEneteredQuantity();'>" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>" } }], columns: [{ data: "part no" }, { data: "description" }, { data: "model no" }, { data: "avalaible qty" }, { data: "quantity" }, { data: null }], }); }//end create data table for createDataTableForAvailableHOstock. //Check saveEneteredQuantity function saveEneteredQuantity(){ var quantity; var getEnteredQuantity; quantity = document.getElementsByName('quantity')[0].value; document.getElementsByName('quantityEntered')[0].value = quantity; for (var i = 0; i < quantity.length; ++i) { var getEnteredQuantity = quantity[i]; console.log("See whats on the loop :",getEnteredQuantity); } getEnteredQuantity = quantity; console.log("Entered Quantity: ",getEnteredQuantity); }// end Check saveEneteredQuantity // create data table for createDataTableSelectedHOStock. function createDataTableSelectedHOStock(target, data) { $(target).DataTable({ info: true, searching:true, paging: true, columnDefs: [{ targets: [-1], render: function () { return "<button type='button'>" + (target == '#selectedHOStockToOrder' ? 'Remove' : 'Add') + "</button>" } }], columns: [ { data: "part no" }, { data: "avalaible qty" }, { data: "quantityEntered" }, { data: null }], }); } // end create data table for createDataTableSelectedHOStock. //Compare available quantity with entered quantity function compareQuantity(element, availableQuantity) { if (availableQuantity > element.value){ console.log("True,",element.value + " is less than " + availableQuantity); console.log("Place an Order"); } if (element.value == ''){ alert("Quantity can not be empty. \n Please enter quantity which is less than available quantity"); console.log(element.value); } else if(availableQuantity < element.value) { alert("Your order quantity can not be greater than available quantity. \n Please enter less quantity"); element.value = null; console.log("False,",availableQuantity + " is small than " + element.value); console.log("You can not place an order, enter less quantity"); console.log("Enter value between 1 till " +element.value+ " not more than " +availableQuantity); } } //End Compare available quantity with entered quantity // Accept alphanumeric characters only --> function isNumber(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) { return false; } return true; } // function to move rows function moveRow(evt, fromTable, toTable, getEnteredQuantity) { var table1 = $(fromTable).DataTable(); var table2 = $(toTable).DataTable(); var tr = $(evt.target).closest("tr"); var row = table1.row(tr); var data = JSON.parse(JSON.stringify(row.data())); table2.row.add(data).draw(); row.remove().draw(); }//end startup and initialize empty tables for appearance // this is JavaScript code written in the JSP to access the compatibility HO stock var list = [ { "part no": 'CLT-C659S/SEE', "description": 'Cyan Toner Cartridge', "model no": 'CLX-8640/8650', "avalaible qty": '<input type="text" id="CLT-C659S/SEE_avaliableQuantity" name="avaliableQuantity" class="form-control" readonly="readonly" value="23">', "quantity": '<input type="text" id="quantity" name="quantity" class="form-control" onkeypress="return isNumber(event)" onblur="compareQuantity(this, 23)" value="" />', "quantityEntered": '<input type="text" id="CLT-C659S/SEE_quantity" name="quantityEntered" class="form-control" onkeypress="return isNumber(event)" readonly value="" />' }, ]尝试使用$('#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;
}

Answer 2

将此添加到h1类

h1 {
  z-index: 1000;
}

现在让我们说你需要一些东西然后在标题之上，你给那个元素的类一个高于1,000的z-index，所以也许是1,001！如果你需要落后的东西，只需将其设为999或更低。使用1,000可以在任一方向（+/-）使用大量自由范围。

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

2 个答案: