0

我有一个绝对 div 嵌套在相对 div 中。我希望绝对 div 的左值相对于祖父母的位置，但仍然允许它的高度相对于它的父元素。这是页面所在的位置：http: //pixeloft.com/clients/supportcenter/facilitators/

我希望 bio 元素的左值在单击时始终具有第一个“Frank Abdale”的左值。

这可以通过js设置div的left值来实现吗？

这是我的代码：http: //jsfiddle.net/6RQ3u/

HTML：

    <div class="person">
    <div class="person-info">   <a class="showBio" target="1">
    <h4>Name 1</h4></a>

        <div class="arrow" id="arrow-1">^</div>
    </div>
    <div class="bio-wrapper">
        <div class="bio" id="bio-box-1"><a class="hideBio" target="1">X</a>Bio</div>
    </div>
</div>
<div class="person">
    <div class="person-info">   <a class="showBio" target="2">
    <h4>Name 2</h4></a>

        <div class="arrow" id="arrow-2">^</div>
    </div>
    <div class="bio-wrapper">
        <div class="bio" id="bio-box-2"><a class="hideBio" target="2">X</a>Bio</div>
    </div>
</div>
<div class="person">
    <div class="person-info">   <a class="showBio" target="3">
    <h4>Name 3</h4></a>

        <div class="arrow" id="arrow-3">^</div>
    </div>
    <div class="bio-wrapper">
        <div class="bio" id="bio-box-3"><a class="hideBio" target="3">X</a>Bio</div>
    </div>
</div>

CSS：

.person a h4 {
    color: #000;
    font-weight: normal;
    font-size: 18px;
    line-height: 21px;
    width: 100px;
}
.bio {
    border-top: 18px solid #387496;
    position:absolute;
    width:618px!important;
    float:left;
    background-color:#d8edf4;
    padding:15px 170px;
    top:284px;
    left:-19px;
    display:none;
    z-index:200;
    clear: both;
}
.person {
    width:164px;
    margin-right:20px;
    float:left;
    display:inline;
    margin-bottom:30px;
    position: relative;
}
.person-info {
    float:left;
}
.showBio {
    float:left;
}
.hideBio {
    float:right;
    color:#fff!important;
    font-size:11px;
    position: absolute;
    right: 10px;
    top: -14px;
}
.arrow {
    display:none;
    background: url('images/bio-arrow.jpg') no-repeat -2px -6px #fff;
    float: left;
    display: block;
    clear: both;
    width: 30px;
    height: 15px;
    text-indent: -3000px;
}
a{cursor:pointer;}

查询：

jQuery(function () {
    jQuery('.bio').hide();
    jQuery('.arrow').hide();
    jQuery('.showBio').click(function () {
        jQuery('.bio').hide();
        jQuery('.arrow').hide();
        jQuery('#bio-box-' + $(this).attr('target')).slideToggle('fast');
        jQuery('#arrow-' + $(this).attr('target')).slideToggle('fast');
    });
    jQuery('.hideBio').click(function () {
        jQuery('#bio-box-' + $(this).attr('target')).slideToggle('slow');
        jQuery('#arrow-' + $(this).attr('target')).slideUp();
    });

});

感谢你的帮助！

4

0 回答 0