这个小提琴http://jsfiddle.net/paultrotter50/fdvC5/显示了我在检测位置绝对内容的高度时遇到的问题。
我正在创建一个选项卡式面板，以便用户可以选择房间类型，然后选择房间子类型。房间子类型（ul.sub-types）具有绝对位置，因此可以正确定位。
当用户在房间子类型之间切换时，我需要使用 jQuery/javascript 来检测 ul.sub-types 的高度，以便我可以设置整个面板的高度（div.tab-panel - 显示为蓝色轮廓) 以匹配其内容。这应该意味着面板之后的页面内容不会被绝对定位的房间子类型重叠。
不幸的是，jQuery 函数似乎运行了两次——第一次它检测到正确的值并正确调整了蓝色轮廓的选项卡面板。然后它似乎立即再次运行并返回不正确的值。
当您单击左侧栏中的家庭，然后单击右侧底部的家庭双人间时，您可以最清楚地看到这一点。这在列表中有很多项目，以便强调高度变化。
任何有关导致问题的原因和/或如何解决此问题的建议将不胜感激。
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() */