谷歌搜索結果樣式彈出

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> 

正如你所看到的，已經有一個正確的專欄。當您點擊>>右側欄應該切換到彈出窗格中的信息。如果再次單擊>>，則會返回到right_col div中的默認數據。

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

我可以在造型和特效工作以後。大部分只是需要得到這個功能。

Answer 1

所以，我終於想通了如何做我想做的事。

這裏有一個小提琴：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; } 

Answer 2

該功能看起來使用JQuery這樣的事情....

假設。小和.popout設置爲顯示：無在CSS

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