Question

我正在构建一个网站，我有一个状态更新列表，我想允许用户为列表中的每个项目写评论

但是我试图实现类似于堆栈溢出工作方式的UI 特别是用户点击的可折叠评论表单/列表在列表中添加对特定状态更新的评论，并在列表中的该项目下方显示评论条目表单以及已发布的特定评论。

如何使用Jquery完成此操作？

注意：还要查找标记示例另一个单词的工作示例。谢谢是的，如果你能显示非常好的异步回发

Answer 1

要加载内容，您可以使用load方法挂钩click事件以填充div。

例如，在视图中，您可以使用以下内容： -



<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>

<div id="commentContainer" style="display:none;">
    Loading...
</div>

<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%> <div id="commentContainer" style="display:none;"> Loading... </div>

虽然连接所有内容的javascript将是： -

    $(function() {
        $("#commentLink").click(function() {
            $("#commentContainer").toggle();
            if ($("#commentContainer").is(":visible")) {
                $("#commentContainer").load($(this).attr("href"));
            } else {
                $("#commentContainer").html("Loading..."); //Or just leave it as is...
            }
            return false; //Prevent default action
        });
    });

Answer 2

快速方法（仅显示/隐藏评论区域）将类似于以下内容：

$(function(){
   $('#id_of_element_to_use_for_click').click(function(){
      $('#id_of_comment_area').slideToggle();
   });
});

jQuery网站将为您提供不同方法的doco，例如淡入淡出，幻灯片或其他组合动画。

我在此处的示例中使用的“评论区域”可能是<div>标记，其中包含您现有的评论，以及您希望用户输入答案的textarea或文本输入框。

您需要进行异步回发吗？

如何制作像Stackoverflow一样的可折叠评论框

2 个答案: