mint.com javascript下拉效果

Question

我需要重新创建mint.com在另一个网站上的效果。当您转到交易页面并单击您的交易之一时，会在下方弹出一个选项卡，上面写着编辑详细信息。当您单击该选项卡时，将出现一个div下拉列表，显示有关该事务的更多详细信息。我甚至不知道这种效果叫什么，但我需要知道如何重新创建这样的东西，最好是用jquery。

下面是我所说的一些截图。

​

​

Answer 1

您需要做的唯一一件事就是获取所单击元素的位置，并在其下方显示一个div。当然，你需要一些东西来获取所有额外的信息并显示出来。所以我要做的第一件事就是在页面上的某个地方创建一个div并隐藏它

<div id="myEditRecordContainer" style="position:absolute; top: 0px; left: 0px; display: none"></div>

然后，我将设置单击处理程序

$('.recordDiv').click(function(e){
   //get the position of the clicked element
   var position = $(e.target).position();

   //set position of the div bellow the current element
   $('div#myEditRecordContainer').css({"top" : position.top() + $(this).height() + "px", "left": position.left()});

   //some kind of method that will get or populate the extra information 
   //you can use the $.ajax() to get the html from a web service or something along those lines
   var detailsHtml = GetExtraRecordDetails();
   $("div#myEditRecordContainer").html(detailsHtml);

   //now display the div - we already set the css for the position 
   //correctly so it should just display where you wanted it
   $("div#myEditRecordContainer").show();
});

你需要在“我完成”按钮上做的唯一一件事就是

$("div#myEditRecordContainer").hide();

当然，提交更改后:)

我没有太多的时间来给出一个更详细的例子，但这只是我的想法，在这种情况下我会怎么做。

我真的希望这至少能给你一个关于你能做什么的想法。

Answer 2

下面是一个可以做到这一点的jQuery插件：http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx