Question

我想在打开时自动刷新可折叠的内容。我怎么能管理呢？

我在下面有这个代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <a href="#demo" class="btn btn-info" data-toggle="collapse">Read more</a>
  <div id="demo" class="collapse">
    This needs to be refreshed everytime it shows up.
  </div>
</div>

</body>
</html>

＆＃13;

Answer 1

如果您想在演出过程开始时触发刷新，可以使用show.bs.collapse事件......

$('#demo').on('show.bs.collapse', function () {
  // Put here your code for refreshing the div content (ajax call, etc.)
});

如果你想在div完全可见时触发刷新（转换已经完成），那么你有shown.bs.collapse事件......

$('#demo').on('shown.bs.collapse', function () {
  // Put here your code for refreshing the div content (ajax call, etc.)
});

如果您需要，您可以在隐藏div时使用等效事件hide.bs.collapse和hidden.bs.collapse。

我希望它有所帮助

Answer 2

为此，您需要使用AJAX，异步Javascript和XML。

如果可能，请创建一个单独的页面collapsable.html，其中只包含可折叠div的内容。

然后，向该按钮添加一个事件监听器。

document.querySelector("a[data-toggle='collapse']").addEventListener("click", function() {
    output("Refreshing content...");
    var xmlhttp = new XMLHttpRequest(); // AJAX
    xmlhttp.open("GET", "collapse.html"); // Replace with your filename here
    xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState === 4) { // If finished loading
            if(xmlhttp.status === 200) { // If loaded correctly
                output(xmlhttp.responseText);
            } else {
                output("Error loading content -- check your internet connection");
        }
    }
    xmlhttp.send();
});

您需要定义output，我用它来设置div的内容。

目前，它会将内容覆盖到＆＃34;刷新内容...＆＃34;，使用AJAX发出互联网请求，然后如果一切顺利，则替换＆＃34;正在加载＆＃34;与实际内容。如果您不想在加载时覆盖现有内容，则可以删除output("Refreshing content...")行。

function output(content) {
    document.querySelector("#demo").innerHTML = content;
}

您也可以使用AJAX再次加载整个页面，但之后您可能需要解析响应数据。

详细了解AJAX - https://developer.mozilla.org/en-US/docs/AJAX

打开后自动刷新可折叠的内容

2 个答案: