获得手风琴中前3个HTML元素的高度

Question

我有启动4手风琴和只需要显示前3个要素。因此，父元素.panel-list应该具有这三个元素的完整高度，如果单击某些.panel并显示其高度的.collapse子元素(此高度不添加到.panel元素的总高度)：

var count = 0;

$('.panel-list .panel:lt(3)').each(function() {
       count += $(this).height(); 
});

$('.panel-list').css({'height' : count, 'transition' : '.25s', 'overflow' : 'hidden'});

$('.loadmore_panels').on('click', function() {
    $('.panel-list')
        .attr('id', 'definitive')
        .css({'height' : 'auto', 'overflow-y' : 'visible'});
    $(this).hide();
});

这很好，但是当单击.collapse时，它并没有将.panel的高度添加到.panel中。

<div id="panely" class="accordion">             
    <div class="panel-list">
        <div class="panel panel-1">
            <div id="heading-1" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                Question 1
                </button>
            </div>
            <div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#panely">
                <div class="a py-4">
                    Answer 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-2">
            <div id="heading-2" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
                Question 2
                </button>
            </div>
            <div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#panely">
                <div class="a py-4">
                    answer 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-3">
            <div id="heading-3" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
                Question 3
                </button>
            </div>
            <div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#panely">
                <div class="a py-4">
                    Answer 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-4">
            <div id="heading-4" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
                Question 4
                </button>
            </div>
            <div id="collapse-4" class="collapse" aria-labelledby="heading-4" data-parent="#panely">
                <div class="a py-4">
                    answer 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-5">
            <div id="heading-5" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-5" aria-expanded="true" aria-controls="collapse-5">
                Question 5
                </button>
            </div>
            <div id="collapse-5" class="collapse" aria-labelledby="heading-5" data-parent="#panely">
                <div class="a py-4">
                    answer 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>                              
                    </div>
                </div>
            </div>
        </div>
    </div>          
</div>

<div class="loadmore_panels btn btn-primary">Show more</div>

CODEPEN https://codepen.io/trueweb/pen/MWYPNyd?editors=1010

Answer 1

要做你想做的事，你不需要使用JavaScript从面板中获得et设定的高度。更喜欢使用引导类和带有javascript的css选择器的功能。

使用CSS nth-child(n+4)选择器从4选择所有面板。

添加'd-none'引导程序的类(以隐藏它们)

$('div.panel:nth-child(n+4)').addClass('d-none');

简单切换显示c

$('.loadmore_panels').click(function(){
$('.panel + .d-none').toggleClass('d-done d-block')
})

下面是我的工作示例：https://codepen.io/bZez/pen/povxMQo

​

$('div.panel:nth-child(n+4)').addClass('d-none');
$('.loadmore_panels').click(function(){
$('.panel + .d-none').toggleClass('d-done d-block')
})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="panely" class="accordion">
    <div class="panel-list">
        <div class="panel panel-1">
            <div id="heading-1" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                    Question 1
                </button>
            </div>
            <div id="collapse-1" class="collapse" aria-labelledby="heading-1" data-parent="#panely">
                <div class="a py-4">
                    Answer 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-2">
            <div id="heading-2" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
                    Question 2
                </button>
            </div>
            <div id="collapse-2" class="collapse" aria-labelledby="heading-2" data-parent="#panely">
                <div class="a py-4">
                    answer 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-3">
            <div id="heading-3" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
                    Question 3
                </button>
            </div>
            <div id="collapse-3" class="collapse" aria-labelledby="heading-3" data-parent="#panely">
                <div class="a py-4">
                    Answer 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-4">
            <div id="heading-4" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
                    Question 4
                </button>
            </div>
            <div id="collapse-4" class="collapse" aria-labelledby="heading-4" data-parent="#panely">
                <div class="a py-4">
                    answer 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-5">
            <div id="heading-5" class="panel-heading">
                <button class="btn w-100 text-left" type="button" data-toggle="collapse" data-target="#collapse-5" aria-expanded="true" aria-controls="collapse-5">
                    Question 5
                </button>
            </div>
            <div id="collapse-5" class="collapse" aria-labelledby="heading-5" data-parent="#panely">
                <div class="a py-4">
                    answer 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et sem quis felis porta egestas eget non leo.
                    <div class="d-flex align-items-center pt-4">
                        <a href="https://example.com/services#show-projects">Case studies</a>
                        <a href="https://example.com/contact#formular">Contact</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="loadmore_panels btn btn-primary">Show more</div>

​