javascript - 单击即可扩展 DIV - 按需

Question

我进行了大量搜索，发现了许多关于点击可展开 div 的 Javascript/jquery 教程..

例如http://www.dustindiaz.com/basement/block-toggle.html

但是我正在寻找的内容略有不同..我需要在点击时加载div内容...而不是在后台隐藏加载div...例如使用display:none。

这是按需加载内容的工作示例 http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm

现在显然对于这样一个小任务来说这是相当复杂的。我只需要一个简单的文本链接来扩展下面的 div。

我希望这是有道理的......大家有什么想法吗？

Answer 1

<script type="text/javascript">
    $(document).ready(function () {
        $("#create-content").click (function () {
            //TODO: Show some kind of "loading" indicator
            $.get("content.html", function (data) {
                //TODO: Hide the "loading" indicator
                $("#target-content").html (data);
            });
        });
    });
</script>

<a href="#" id="create-content">Click</a>
<div id="target-content></div>

此片段将使用 AJAX 加载 content.html，并且 respose 将用作目标 div 的 html 内容，content.html 可以是服务器上的任何资源或脚本，但是您应该非常小心避免 XSS 和任何其他安全风险。

此外，如果您添加某种动画来指示内容已加载，那就太好了，否则用户可能会认为什么都没有发生。

缺少的另一件事是，如果对服务器的请求由于某种原因失败，则显示某种错误消息，有关 $.get 方法的文档可以在这里找到:http://api.jquery.com/jQuery.get/