Javascript 按需点击可扩展DIV

我已经搜索了很多，在click expandable Div上找到了许多Javascript/jquery教程

e、 g

然而，我要找的是略有不同的。。我需要在单击时加载div内容。。。而不是在后台隐藏加载div。。。带显示：例如，无

---

下面是一个按需加载内容的工作示例

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

我希望这是有道理的。。。有什么想法吗，伙计们？

<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>

$（文档）.ready（函数（）{
$（“#创建内容”）。单击（函数（）{
//TODO:显示某种“加载”指示器
$.get（“content.html”，函数（数据）{
//TODO:隐藏“加载”指示器
$（“#目标内容”）.html（数据）；
});
});
});
下面是一个我认为您想要做的工作示例：


​

这会使内容加载display:none，然后将新内容向下滑动，使其看起来非常时尚。
我经常通过在GridView的RowDataBound事件中在下面创建div来实现这一点。如果你不想在下面创造这些。。。我建议只创建一个接受当前元素的函数，抓取父元素，直到抓取其中包含行的父元素，然后调用ajax：

请记住，这是伪代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#clickable-div").click (function () {

            $.ajax({
                url: "test.html?action=getLink", 
                success: function(data){
                  $(this).parentElement.append(data);
            }});

            $(this).show("slide", { direction: "down" }, 1000);
        });
    });
</script>


$（文档）.ready（函数（）{
$（“#可单击div”）。单击（函数（）{
$.ajax({
url:“test.html？action=getLink”，
成功：功能（数据）{
$（this.parentElement.append（数据）；
}});
$（this.show（“幻灯片”{direction:“down”}，1000）；
});
});

尽管这不是有效的代码，但还是有一些类似的东西。返回的数据可以是HTML格式。。。或者，您可以将其JSON并在success函数中解析并追加。
如果您希望实现终极的简单性（使用jQuery），您可以使用以下快捷方式：

$('#your_target_div').load('your_url');

您想从其他页面将内容加载到
div
？或者从页面上的其他位置，或者从
表单
？到目前为止，你已经准备好了什么？
<script type="text/javascript">
    $(document).ready(function () {
        $("#clickable-div").click (function () {

            $.ajax({
                url: "test.html?action=getLink", 
                success: function(data){
                  $(this).parentElement.append(data);
            }});

            $(this).show("slide", { direction: "down" }, 1000);
        });
    });
</script>

$('#your_target_div').load('your_url');