jquery - Google 搜索结果样式的弹出窗口

Question

我需要制作一个右栏弹出窗口，其中包含有关各个搜索结果的附加信息。很像在 Google 的搜索结果中，您可以在其中单击双箭头以显示更多信息。我不需要网络预览，只是为了添加我自己的附加信息。

<div class="left_col">
<div class="search_result">
  <div class="result_details">
    <div class="result_details_button"> This is the button to make the popout >> </div>
  </div>
  <p class="small">Info about item</p>
  <div class="popout">Pop out data is here</div>
</div>
</div>

<div class="right_col">
  <div>Map results</div>
</div>

如您所见，右侧已经有一个列。当您单击 >> 时，右栏应切换到弹出 div 中的信息。如果再次单击 >>，则会返回到 right_col div 中的默认数据。

http://jsfiddle.net/thepriebe/XPgdx/

我可以稍后处理样式和效果。大多数情况下只需要获得此功能。

Answer 1

使用 JQuery，该功能看起来像这样......

假设 .small 和 .popout 在 CSS 中设置为 display: none

$(document).ready(function()
{
    $(".result_details_button").click(function()
    {
        //Parent >> .result_details
        $(this).parent().next(".small").css("display", "block");
        $(this).parent().next(".popout").css("display", "block");
    });
}