0

個々の検索結果に関する追加情報を含む右側の列のポップアウトを作成する必要があります。二重矢印をクリックして詳細情報を表示する Google の検索結果と同様です。独自の追加情報を入力するためだけに、Web プレビューは必要ありません。

<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/

スタイリングとエフェクトは後で作業できます。ほとんどの場合、これを機能させる必要があります。

4

2 に答える 2

0

その機能は、JQueryを使用すると次のようになります....

CSS で .small と .popout が 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");
    });
}
于 2013-02-18T20:40:18.223 に答える
0

それで、私はついに自分がやりたいことをする方法を見つけました。

ここにフィドルがあります：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; }
于 2013-02-22T17:32:14.737 に答える