-1

我需要创建一个手风琴，可以跟踪它对高度所做的调整。在大多数情况下，手风琴的容器会自动调整其高度，但我的手风琴是在一个相对定位的 div 内的绝对定位的 div 中，我需要调整相对定位的 div 的高度以及手风琴移动一些背景周围的图像。如果其他人需要类似的东西，这是我想出的结果（在 ahren 和 dmi3y 的帮助下）：

http://jsfiddle.net/MSatE/48/

的HTML：

<div id="accordion">
    <h3>Sample Header 1</h3>
    <div>
        <p>
            Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem
        </p>
    </div>
    <h3>Sample Header 2</h3>
    <div>
        <p>
            Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem
        </p>
    </div>
</div>

的CSS：

#accordion {
    width: 600px;
    border: 1px solid #C0C0C0;
    border-bottom: none;
    box-shadow: 0 0 5px #C0C0C0;
    -webkit-box-shadow: 0 0 5px #C0C0C0;
    margin: 30px auto;
    background: #FFF;
}

#accordion h3 {
    border-bottom: 1px solid #C0C0C0;
    padding: 10px;
}

#accordion div {
    display: none;
    padding: 20px;
    border-bottom: 1px solid #C0C0C0;
    background: #F4F4F4;
}

#accordion p {
    padding: 0;
    margin: 0;
}

#accordion h3:hover {
    cursor: pointer;
}

.forMeasure {
    position: absolute;
    visibility: hidden;
    display: block!important;
}

javascript/jQuery:

$('#accordion h3').click(function(){
    var adjustment = 0;
    var div = $(this).next('div');

    if(div.css('display') == 'none')
    {
        adjustment += div.addClass('forMeasure').outerHeight();
        div.removeClass('forMeasure');
        div.slideDown();
        div.siblings('div').each(function(){
            if($(this).css('display') == 'block')
            {
                adjustment -= $(this).outerHeight();
                $(this).slideUp();
            }
        });
    }
    else
    {
        adjustment -= div.outerHeight();
        div.slideUp();
    }
});
4

3 回答 3

2

我已经简化了你的手风琴...

http://jsfiddle.net/MSatE/3/

$('#accordion h3').click(function(){
    $(this).next().slideDown().siblings('div').slideUp();
});​

我所做的唯一 CSS 更改：

#accordion div {
    position: relative; /* <-- changed to relative */
    display:none; /* <-- changed from visibility:hidden; to display:none; */
    padding: 20px;
    border-bottom: 1px solid #C0C0C0;
    background: #F4F4F4;
}

编辑

根据要求...在动画开始之前检索手风琴新高度的方法...
http://jsfiddle.net/MSatE/6/

$('#accordion h3').click(function(){
    /* Extra code to get the height of the new accordion once this div has been shown... */
    var $t = $(this);
    $t.siblings('div').filter(':visible').addClass('oldVisible');
    $t.next().show().siblings('div').hide();
    var height = $('#accordion').outerHeight();
    $t.next().hide().siblings('.oldVisible').show().removeClass('oldVisible');

    console.log(height);
    $t.next().slideDown().siblings('div').slideUp();
});​
于 2012-11-27T21:07:15.073 回答
0

您检查过jQueryUI 手风琴功能吗？如果没有，请查看他们的示例，将它们复制/粘贴到您网站上的文档中，然后花 10 分钟时间使用它。你会很高兴你做到了。

于 2012-11-27T20:54:01.633 回答
0

在这里，我稍微更改了您的 jquery 以获得我认为您所要求的内容。基本上现在内容 div 的高度涵盖了其中的所有内容。http://jsfiddle.net/MSatE/9/

看起来非常简单，只需将以下行调整为 100%：

var div_height = $(this).height();
$(this).css('height', '100%');

希望这就是你要找的！问候，-Epik-

于 2012-11-27T23:02:35.193 回答