如何使类似的可折叠＃1评论框 [英] How to make Collapsible comment box like Stackoverflow

问题描述

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

I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list

不过，我想实现的方式类似堆栈溢出作品UI
特别是可折叠的评论表单/列表，用户点击列表中的特定状态更新添加评论，在列表中该项目下面的评论条目形式与具体的意见一起显示出来已经发布。

However I am trying to implement a UI similar to the way stack overflow works specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.

我如何做到这一点使用Jquery？

How do I accomplish this using Jquery?

注意：也在寻找标记示例换句话说工作示例。谢谢
是的，如果你能证明异步回发，这将是很好过。

Note: looking also for the markup example another words a working sample. Thanks And yes if you could show Async postback that would be nice too

推荐答案

要加载你可以挂钩一个click事件来填充使用load方法的div的内容。

To load the content you can just hook up a click event to populate a div using the load method.

例如在视图中你可以有这样的： -

For example in the view you could have something like:-

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

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

而钩一切行动的JavaScript将是： -

while the javascript to hook everything up would be:-

    $(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
        });
    });

这篇关于如何使类似的可折叠＃1评论框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！