文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用jquery ajax填充一个div而不影响同一个html页面中的其他内容？

问如何使用jquery ajax填充一个div而不影响同一个html页面中的其他内容？
EN

Stack Overflow用户

提问于 2013-12-28 13:31:01

回答 1查看 2K关注 0票数 0

我正在使用jquery/ajax/php/html构建一个实时搜索字段：

  $("#keywords").keyup(function()
  {
    var word = $("#keywords").val();
    if(word != '')  
     {
      $.ajax
       ({
         type: "POST",
     url: "mysearch.php",
     data: "word="+ word,
     success: function(response)
     {
        $("#results").html(response);
     }.....

我在html页面中有一个空的div存根：

    <div id="results"></div>;

我能够实现mysearch.php并获得结果，并用响应填充" results“div。但是，当响应填充到"results“div中时，同一html页面中的其他内容行将向下移动，以便为"results”div留出空间。我真的不喜欢这个，因为它感觉屏幕在抖动。

有没有办法让我修改它，当响应返回填充"results“div时，它会显示在一个新的层中，而我在现有层中的内容会留在那里？如果有一些重叠的内容，我希望新的响应"results“div覆盖现有的层(现有的层内容变为隐藏)。

谢谢!

ajax

overlay

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2013-12-28 13:45:53

有几种方法可以解决这个问题。一个相当简单的、纯粹的jquery选项可能是，你可以从隐藏$('#results') div开始，附加html，然后执行$('#results').slideDown()来使转换更加流畅。

因此，换句话说，在获得成功响应时，您将使用

    $("#results").hide().html(response).slideDown();

你可以做的另一件事是将结果粘贴到一个可折叠/折叠的窗格中，当它被填满时会触发它展开。Bootstrap有一个很好的可折叠窗格的例子：http://getbootstrap.com/javascript/#collapse

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20811372

复制

相似问题

问如何使用jquery ajax填充一个div而不影响同一个html页面中的其他内容？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery ajax填充一个div而不影响同一个html页面中的其他内容？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery ajax填充一个div而不影响同一个html页面中的其他内容？
EN