このフィドルhttp://jsfiddle.net/paaultrotter50/fdvC5/は、位置の絶対コンテンツの高さを検出する際に私が抱えている問題を示しています。
ユーザーが部屋のタイプを選択してから部屋のサブタイプを選択できるように、タブ付きのパネルを作成しています。部屋のサブタイプ (ul.sub-types) には絶対位置があるため、正しく配置できます。
ユーザーが部屋のサブタイプを切り替えるとき、パネル全体の高さを設定できるように、jQuery/javascript を使用して ul.sub-types の高さを検出する必要があります (div.tab-panel - 青いアウトラインで表示) ) をその内容に一致させます。これは、パネルの後に来るページ コンテンツが、絶対配置された部屋のサブタイプによってオーバーラップされないことを意味するはずです。
残念ながら、jQuery 関数は 2 回実行されているようです。1 回目は正しい値を検出し、青いアウトラインのタブ パネルを正しく調整します。その後、すぐに再び実行されたように見え、正しくない値が返されます。
これは、左側の列のファミリーをクリックしてから、右側の一番下のファミリー ダブルをクリックすると、最もはっきりとわかります。これは、高さの変化が強調されるように、リストに多くの項目があります。
問題の原因および/またはこれを修正する方法についてのアドバイスをいただければ幸いです。
HTML:
<section id="main_col">
<div class="tab-panel">
<ul id="room-types" class="left-tabs">
<li class="type double selected">
<input id="double" type="radio" name="room-type" checked="checked">
<label for="double">Double
<ul class="sub-types">
<li class="selected">
<input id="subtype1" type="radio" name="double-subtypes" value="subtype1" checked="checked">
<label for="subtype1">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Classic Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype1 -->
</li>
<li>
<input id="subtype2" type="radio" name="double-subtypes" value="subtype2">
<label for="subtype2">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Classic Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype2 -->
</li>
<li>
<input id="subtype3" type="radio" name="double-subtypes" value="subtype3">
<label for="subtype3">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Classic Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype3 -->
</li>
</ul>
</label>
</li><!-- end .type.double -->
<li class="type twin">
<input id="twin" type="radio" name="room-type">
<label for="twin">Twin
<ul class="sub-types">
<li class="selected">
<input id="subtype1" type="radio" name="twin-subtypes" value="subtype1" checked="checked">
<label for="subtype1">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Twin Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype1 -->
</li>
<li>
<input id="subtype2" type="radio" name="twin-subtypes" value="subtype2">
<label for="subtype2">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Twin Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype2 -->
</li>
<li>
<input id="subtype3" type="radio" name="twin-subtypes" value="subtype2">
<label for="subtype3">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Twin Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype3 -->
</li>
</ul>
</label>
</li><!-- end .type.twin -->
<li class="type family">
<input id="family" type="radio" name="room-type">
<label for="family">Family
<ul class="sub-types">
<li class="selected">
<input id="subtype1" type="radio" name="family-subtypes" value="subtype1" checked="checked">
<label for="subtype1">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Family Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype1 -->
</li>
<li>
<input id="subtype2" type="radio" name="family-subtypes" value="subtype2">
<label for="subtype2">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Family Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype2 -->
</li>
<li>
<input id="subtype3" type="radio" name="family-subtypes" value="subtype3">
<label for="subtype3">
<span class="col2">
<img src="img/pg-specific/left_col/room_sea_view.jpg" width="124" height="70" alt=" ">
</span><!-- end col2 -->
<span class="col1">
<span class="title">Family Double</span>
<ul>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
<li>bullet item 1</li>
<li>bullet item 2</li>
<li>bullet item 3</li>
</ul>
</span><!-- end col1 -->
<span class="clearfix"></span>
</label><!-- end lable for subtype3 -->
</li>
</ul>
</label>
</li><!-- end .type.family -->
</ul>
</div>
CSS:
/*--- booking tab panels --- */
.tab-panel ul.sub-types {display:none;}
.tab-panel { position:relative; width:100%; border: 1px solid blue; height:500px; font-size:0.9em;}
.tab-panel input[type="radio"]:checked + label ul.sub-types {display:block; position:absolute; right:0px; top:0px; width:80%;}
.tab-panel ul.sub-types > li .col2, .tab-panel ul.sub-types > li .col1 ul {display:none;}
.tab-panel ul.sub-types input[type="radio"]:checked + label .col2, .tab-panel ul.sub-types input[type="radio"]:checked + label .col1 ul {display:block;}
#main_col .tab-panel input, #main_col .tab-panel label {float:left;}
#main_col .tab-panel input {clear:both; margin-right:10px; width:auto;}
#room-types > li > input[type="radio"]:checked + label { font-weight:bold; background-color: #bfb2b5; width:60%; }
#room-types > li > input[type="radio"]:checked + label .sub-types { font-weight:normal;}
#room-types > li > label {padding:7px 0px 5px 5px;}
.tab-panel .sub-types {background-color: #e0d7c1; }
.tab-panel .col1, .tab-panel .col2 {display:block;}
.tab-panel .col1 {float:left; width:58%; margin-left:10%; margin-top:10px; margin-right:0px;}
.tab-panel .col2 {float:right; width:25%; padding:10px; margin-right:0px;}
.tab-panel .sub-types li.selected label {width:100%;}
.tab-panel .sub-types li.selected label { background-color:#f3ebde;}
.tab-panel .sub-types input[type="radio"]:checked + label {background-color:#f3ebde; background-image: url(../img/core/radio-on-cream-bg.gif); background-repeat:no-repeat; background-position:7px 13px; cursor:auto;}
.tab-panel .sub-types li label {background: url(../img/core/radio-off-sand-bg.gif); background-repeat:no-repeat; background-position:7px 13px; cursor:pointer; }
#main_col .tab-panel .sub-types li label {margin-bottom:0px; padding-bottom:10px; padding-top:5px;}
.tab-panel .sub-types li label li {background-image:url("../img/core/tick-description-text.gif"); background-repeat:no-repeat; background-position: 0px 2px; padding-left:15px; width: 100px; float: left; margin-right:15px; margin-bottom:3px;}
.tab-panel .sub-types li label ul {width:100%; float:left; margin-top:8px;}
.tab-panel .sub-types li label img {max-width: 100%; height: auto;}
.tab-panel .sub-types input[type="radio"]:checked + label .title { font-weight:bold;}
jQuery:
$(document).ready(function() {
/* book page panels -------------------------------------- */
$('.sub-types li').click(function() {
$(this).parent().find('input:radio').attr('checked', false)
$(this).children('input:radio').attr('checked', true)
$('.sub-types li').removeClass('selected');
$(this).addClass('selected');
var panelHeight = $(this).closest('ul.sub-types').height();
alert("height: " + panelHeight);
$(this).closest(".tab-panel").css('height', panelHeight)
});
}); /* end $(document).ready(function() */