排序元素折叠和内容重新加载

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(){...}));语句，您可以像下面这样折叠它们。

此外，如果此页面是索引.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>