javascript - 无法使用 jQuery 在单击事件上获取 div 的高度

Question

我有一个绝对位置的 div，我需要它的高度来将该数字作为填充添加到其父级，这样它就不会与下面的 div 重叠。我知道这个 HTML 可以以不同的方式设置，但我无法控制 html。每个 div 的高度不同，因此每次单击 div 时，高度都必须改变，但我无法让它工作。

这甚至可能吗？

提前致谢！

$(document).ready(function(){
    
    $('.content').hide();

    $('.slides-wrapper').attr({
      role: 'tablist',
      'aria-multiselectable': 'false'
    });

    $('.content').attr('id', function (IDcount) {
      return 'panel-' + IDcount;
    });

    $('.content').attr('aria-labelledby', function (IDcount) {
      return 'control-panel-' + IDcount;
    });

    $('.content').attr('aria-hidden', 'true');
    $('.content').attr('role', 'tabpanel');

    $('.title').each(function (i) {

      $(this).attr('role', 'tab');

      var slideTarget = $(this).next('.content').attr('id');

      var slideLink = $('<a>', {
        'href': '#' + slideTarget,
        'role': 'button',
        'aria-expanded': 'false',
        'aria-controls': slideTarget,
        'id': 'control-' + slideTarget
      });

      $(this).wrapInner(slideLink);

    });

    $('.title a').click(function () {

      if ($(this).attr('aria-expanded') == 'false') {
        $('.title > a').attr('aria-expanded', false).removeClass('active').parent().next('.content').slideUp();
        $(this).attr('aria-expanded', true).addClass('active').parent().next('.content').slideDown().attr('aria-hidden', 'false');

        //THIS IS WHERE I ADD THE PADDING DYNAMICALLY SINCE THE CONTENT DIV IS ABSOLUTE

         $(".inner").css("padding-bottom", $(".content[aria-hidden='false']").height());
   
      } else {
        $(".inner").css("padding-bottom", "0px");
  
        $(this).attr('aria-expanded', false).removeClass('active').parent().next('.content').slideUp().attr('aria-hidden', 'true');
      }

      return false;
    }); 
});

.slides-wrapper{
    padding-bottom: 30px;
}
.slides-wrapper .inner{
    display: flex;
    justify-content: space-between;
}

.content{
    width: 100%;
    background: red;
    position: absolute;
    left: 0;
}

.slide{
     padding:0px 30px;
}
.active{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slides-wrapper">
        <div class="inner">
        
            <div class="slide">
                <div><img src="http://via.placeholder.com/150" alt="image placeholder"></div>
                <div class="title">First Slide</div>
                <div class="content">
                    <p><strong>First slide content</strong> Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
                </div>
            </div>
            
            <div class="slide">
                <div class="field field--name-field-second-panel-image field--type-image field--label-hidden field--item"> <img src="http://via.placeholder.com/150" alt="image placeholder">
                </div>
                <div  class="title">Second Slide</div>
                <div class="content">
                    <p><strong>Second lside content </strong>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
                </div>
            </div>

            <div class="slide">
                <div><img src="http://via.placeholder.com/150" alt="image placeholder"></div>
                <div  class="title">Third slide</div>
                <div class="content">
                    <p><strong>Third slide content&nbsp;</strong>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.&nbsp;<strong>Third Panel content&nbsp;</strong>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.vv<strong>Third Panel content&nbsp;</strong>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.<strong>Third Panel content&nbsp;</strong>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.<strong>Third Panel content&nbsp;</strong>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
                </div>
            </div>
        </div>
    </div>
    
    <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.vLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit tortor eget felis porttitor volutpat.v
    </div>

标签： javascriptjquery