javascript - 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();

提交类(class)更改后:)

我没有太多时间来给出一个更详细的例子，但这只是我脑海中浮现出的在这种情况下我会做的事情..

我真的希望这至少能让你知道你能做什么。