Question

我一直在搜索很多，并在点击可扩展div上找到了许多Javascript / jquery教程..

e.g。 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和任何其他安全风险。

此外，如果你添加某种动画来表明内容是loagind会很好，否则用户可能会认为没有发生任何事情。

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

Answer 2

这是一个做我认为你想要的工作的例子：

http://jsfiddle.net/yVbYQ/47/

$('.click').click(function(){
  $.ajax({
      type: 'POST',
    url: '/echo/html/',
      data: { html: "<p class='loaded'>hello ajax!<br/>hello ajax!<br/>hello ajax!<br/>hello ajax!</p>"},
    success: function(data) {
      $('#post').html(data);
        $('.loaded').slideDown();
    }
  });
});

和CSS

.loaded
{
    background-color: red;
    display: none;
}

这样可以使用display：none加载内容，然后向下滑动新内容，使其看起来很时尚。

Answer 3

我经常通过在Gridviews的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>

沿着这些方向的东西，虽然那不是工作代码。返回的数据可以是HTML的形式......或者你可以JSON它并在成功函数中解析它并附加。

Answer 4

如果您正在寻找极致的简洁性（使用jQuery），您可以使用快捷方式：

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

可扩展的DIV点击 - 按需

4 个答案: