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>

如您所见，已有一个正确的专栏。当您点击＆gt;＆gt;右列应该切换到popout div中的信息。如果＆gt;＆gt;再次单击，然后返回到right_col div中的默认数据。

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

我可以稍后处理样式和效果。大多数情况下只需要实现这一功能。

Answer 1

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

我们假设.small和.popout设置为在CSS

中显示：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");
    });
}

Answer 2

所以我终于想出了如何做我想做的事。

这是一个小提琴：http://jsfiddle.net/XPgdx/

这是jQuery：

$j(".result_details_button").click(function () {
  var msg = "There are no sites associated with this service.";
  var popout = $j("#search_results_details");
  $j(".result_details_button").not(this).parent().removeClass("active_highlight").parent().removeClass("active_details");
  if($j("#search_results_details").is(":visible") && $j(this).parent().hasClass("active_highlight"))
  {
    popout.html(msg).html($j(this).parent().toggleClass("active_highlight").parent().toggleClass("active_details").find($j(".sites")).html()).hide();
  }
  else
  {
    popout.html(msg).html($j(this).parent().toggleClass("active_highlight").parent().toggleClass("active_details").find($j(".sites")).html()).show();
  };
});

HTML：

<div class="col_left">
  <div class="search_result">
    <div class="result_details">
      <div class="result_details_button"> Sites >></div>
    </div>
    <p>This is a search result</p>
    <div class="sites">Info here</div>
  </div>
</div>
<div class="col_right">Map data here</div>
<div id="search_results_details">This is the popout div where the sites will populate.</div>

对于笑话，css：

.search_result, #paginationControl { padding: 15px 0; border-top: 1px solid #ddd; position: relative;}
.search_result .service { font-size: 18px; font-weight: bold; }
.search_result .service .small { margin-left: 5px; }
.search_result .description { margin: 2px 0; font-size: 12px; color: #222; margin-right: 75px; }
.search_result .description b { color: #000; }
.search_result .small_icon { width: 10px; height: 10px; margin-right: 2px; }

.sites { font-size: 12px; display: none; }
.site_name { font-size: 14px; font-weight: bold; }
.site_block { float:left; border: 2px solid #ccc; border-radius: 4px; margin: 5px 10px 5px 0; padding: 5px; width: auto; background-color: #fff; height: auto; overflow-y: auto; }
.site_name { font-size: 14px; font-weight: bold; }

.result_details {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  cursor: default;
  height: auto;
  margin: 0;
  min-height: 40px;
  padding-left: 9px;
  padding-right: 4px;
  position: absolute;
  right: 0px;
  top: -2px;
  width: 65px;
}
.result_details_button {
  height: 13px;
  margin-left: 6px;
  margin-top: -7px;
  opacity: 0.3;
  position: absolute;
  top: 50%;
}
.result_details_button:hover {
  opacity: 0.6;
}

#search_results_details {
  background: #efefef;
  border-left: solid 1px #ddd;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  margin-left: 67%;
  padding: 10px;
  padding-top: 20px;
  display: none;
  box-shadow: 0px 0px 10px 5;
}
.active_details { z-index: 999; }
.active_highlight { background-color: #efefef; }

Google搜索结果的样式是popout

2 个答案: