Question

我正在一个网站上工作，主要内容显示在页面中心的div中。 div动画在打开时从无任何内容扩展，内容从PHP文件加载。当用户单击不同的菜单选项时，div旨在清除当前内容，折叠回任何内容，然后使用新内容再次展开。

除了清理部分（扩展/折叠和新数据加载功能正常）之外，一切似乎都在工作。问题是当点击不同的站点部分时新数据立即加载 - 我想要它做什么在折叠时显示为空白，因此新内容应仅在重新展开div时出现。这是给我带来麻烦的代码片段：

JQuery代码：

//OPENS DIV
$(document).ready(function() {
  $('#content').show('scale', 1000);
});

//LOADS CONTENT FROM PHP FILE INTO DIV
$(document).ready(function() {
  $('#content').load('../register.php');
});


//SUPPOSED TO CLEAR OUT DIV, COLLAPSE IT, AND RE-EXPAND IT WITH NEW CONTENT
$('#option').click(function() {
  $('#content').html('').hide('scale', 500);
  $('#content').show('scale', 1000).load('../addroom.php');
});

Answer 1

首先，您不需要多个$(document).ready(function(){...}));语句，您可以将它们折叠起来，如下所示。

此外，如果此页面是index.php，您的层次结构如下：

/parent directory
 -index.php
 -addroom.php

然后你可以做

$(document).ready(function() {
  // OPENS DIV
  $('#content').show('scale', 1000);

  //LOADS CONTENT FROM PHP FILE INTO DIV  
  $('#content').load('../register.php');

  //bind click to clear, hide, load and show div
  $('#option').click(function() {
    $('#content').html('').hide('scale', 500);

    // assuming that addroom.php is at the same level as this file/page
    $('#content').load('addroom.php', function() {
      $('#content').delay(2000).show('scale', 1000);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">content
</div>
<hr/>
<button id="option">load</button>

排序元素崩溃和内容重新加载

1 个答案: